Create a Custom jQuery Image Gallery with jCarousel

Create a Custom jQuery Image Gallery with jCarousel


Create a Custom jQuery Image Gallery with jCarousel

Introduction

Alright fellow web designers and developers. We are going to do something a little bit more hardcore this time. There are heaps of jQuery plugins out there, but it's hard to find something that suit us. So, this tutorial will teach you how to be creative and create a customize plugin.

If you have read this post - Single Page Websites With Creative Javascript Effects. You will able to see that, it's quite a popular trend that most of the designers showcase theirs work by using a vertical/horizontal carousel. So, in this tutorial, we will learn how to build an unique jQuery script by modifying other plugin - create a Image gallery with jCarousel. A picture tells thousand words, we are going to transform jCarousel to this:

jCarousel Mod

1. jCarousel - the jQuery carousel plugin

First of all, let me introduce this robust plugin we are about to integrate into this image gallery. jCarousel plugin is fully configurable, and most importantly, I have tested it on different browsers IE6, IE7, IE8, Safari, Chrome and firefox, it's proven works perfectly. With the following configuration, we will get a vertical carousel:

//jCarousel Plugin
$('#carousel').jcarousel({
	vertical: true, //orientation of the carousel, in this case we use vertical
	scroll: 1, //the number of items to scroll by
	auto: 2, //the interval of scrolling
	wrap: 'last', //wrap at last item and jump back to the start
	initCallback: mycarousel_initCallback	//we will use this to further enhance the behavior of this carousel
});

Also, you will have to modify the CSS file for jCarousel as well. I can't go into this details, because the CSS file is quite straight forward. So, in the end, this would be the result from the configuration above and also the customized css files. Please note, the following layout on the left hand side is the default jCarousel layout.

jCarousel Layout

For more configuration, please refer to Sorgalla's jCarousel Documentation

2. HTML

Don't freak out by the length of the HTML, it's basically two UL lists.

  • #slideshow-main: This UL list has a little bit of styling. It has a caption area above a faded background
  • #slidehow-carousel: This is where the jCarousel is located. Just a simple UL list with each link have a REL that will point to the #slideshow-main item.
<div id="welcomeHero">
			
	<div id="slideshow-main">
		<ul>
			<li class="p1 active">
				<a href="#">
					<img src="images/1_big.gif" width="430" height="290" alt=""/>
					<span class="opacity"></span>
					<span class="content"><h1>Title 1</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
				</a>
			</li>
			<li class="p2">
				<a href="#">
					<img src="images/2_big.gif" width="430" height="290" alt=""/>
					<span class="opacity"></span>
					<span class="content"><h1>Title 2</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
				</a>
			</li>
			<li class="p3">
				<a href="#">
					<img src="images/3_big.gif" width="430" height="290" alt=""/>
					<span class="opacity"></span>
					<span class="content"><h1>Title 3</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
				</a>
			</li>
		
			......

		</ul>										
	</div>
				
	<div id="slideshow-carousel">				
		  <ul id="carousel" class="jcarousel jcarousel-skin-tango">
			<li><a href="#" rel="p1"><img src="images/1.gif" width="206" height="95" alt="#"/></a></li>
			<li><a href="#" rel="p2"><img src="images/2.gif" width="206" height="95" alt="#"/></a></li>
			<li><a href="#" rel="p3"><img src="images/3.gif" width="206" height="95" alt="#"/></a></li>
			......
		  </ul>
	</div>
		
	<div class="clear"></div>
		
</div>

3. CSS

CSS is a little bit more complicated in this tutorial so I have included a brief layout to show the IDs and Classes.

However, you will have to make some changes to the jCarousel css jquery.jcarousel.css and skin.css. Note: if you grab a fresh copy from jCarousel website, it will have more complicated skin files and folder layout, the one I have included in the download is a simplified version.

Main layout
body {
	font-family:arial;	
}

img {
	border:0;
}

/* Styling up the image gallery */

#slideshow-main {
	width:429px; 
	float:left; 
	margin-right:3px;
}

#slideshow-main ul {
	margin:0; 
	padding:0; 
	width:429px;
}

#slideshow-main li {
	width:429px; 
	height:290px; 
	display:none;
	position:relative;
}

#slideshow-main li.active {
	display:block !important;
}

#slideshow-main li span.opacity {
	position:absolute;
	bottom:0; left:0;
	display:block; 
	width:100%;
	height:60px;
	background:#000;
	filter:alpha(opacity=50); 
	-moz-opacity:0.5; 
	-khtml-opacity: 0.5; 
	opacity: 0.5;
	z-index:500;
}

#slideshow-main li span.content {
	position:absolute;
	bottom:0; left:0;
	display:block; 
	width:100%;
	height:60px;
	z-index:1000;
}

#slideshow-main li span.content h1 {
	font-size:14px;
	margin:5px 0;
	padding:0 10px;;
	color:#42e2e8;
}

#slideshow-main li span.content p {
	font-size:11px;
	margin:5px 0;
	padding:0 10px;;
	color:#42e2e8;
}



/* Styling up the carousel */

#slideshow-carousel {
	float:left; 
	width:206px;
	position:relative
}

#slideshow-carousel ul {
	margin:0; 
	padding:0;
	list-style:none;
}

#slideshow-carousel li {
	background:#fff; 
	height:97px; 
	position:relative
}

#slideshow-carousel li .arrow {
	left:3px; 
	top:28px; 
	position:absolute; 
	width:20px; 
	height:40px; 
	background:url(images/arrow_white.png) no-repeat 0 0; 
	display:block;
}

#slideshow-carousel li a {
	background:#000; 
	display:block; 
	width:206px; 
	height:95px;
}


#slideshow-carousel .active {
	filter:alpha(opacity=100); 
	-moz-opacity:1.0; 
	-khtml-opacity: 1.0; 
	opacity: 1.0;
}

#slideshow-carousel .faded {
	filter:alpha(opacity=50); 
	-moz-opacity:0.5; 
	-khtml-opacity: 0.5; 
	opacity: 0.5;
}

4. Javascript

We don't have to worry about the carousel, because it's quite stable. What we need to do with the jCarousel is to adjust the setting such as the speed, layout and behavior. For more setting, you can refer to jCarousel official documentation.

Other than that, most of them are basic jQuery script with hover and click events. I have added inline comments and I believe that will help.

$(document).ready(function () {
		
	//jCarousel Plugin
	$('#carousel').jcarousel({
		vertical: true,	//display vertical carousel
		scroll: 1,	//auto scroll
		auto: 2,	//the speed of scrolling
		wrap: 'last',	//go back to top when reach last item
		initCallback: mycarousel_initCallback	//extra called back function
	});

	//Front page Carousel - Initial Setup
	//set all the item to full opacity
   	$('div#slideshow-carousel a img').css({'opacity': '0.5'});
   	
   	//readjust the first item to 50% opacity
   	$('div#slideshow-carousel a img:first').css({'opacity': '1.0'});
   	
   	//append the arrow to the first item
   	$('div#slideshow-carousel li a:first').append('')

 
  	//Add hover and click event to each of the item in the carousel
    $('div#slideshow-carousel li a').hover(
       	function () {
        	
        	//check to make sure the item is not selected
       		if (!$(this).has('span').length) {
       			//reset all the item's opacity to 50%
        		$('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'});
        		
        		//adust the current selected item to full opacity
   	    		$(this).stop(true, true).children('img').css({'opacity': '1.0'});
       		}		
       	},
       	function () {
        		
        	//on mouse out, reset all the item back to 50% opacity
       		$('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'});
       		
       		//reactivate the selected item by loop through them and look for the one
       		//that has the span arrow
       		$('div#slideshow-carousel li a').each(function () {
				//found the span and reset the opacity back to full opacity
       			if ($(this).has('span').length) $(this).children('img').css({'opacity': '1.0'});

       		});
        		
       	}
	).click(function () {

		//remove the span.arrow
	    $('span.arrow').remove();
	    
	    //append it to the current item        
		$(this).append('');
		
		//remove the active class from the slideshow main
		$('div#slideshow-main li').removeClass('active');
		
		//display the main image by appending active class to it.        
       	$('div#slideshow-main li.' + $(this).attr('rel')).addClass('active');	
        	
       	return false;
	});


});


//Carousel Tweaking
function mycarousel_initCallback(carousel) {
	
	// Pause autoscrolling if the user moves with the cursor over the clip.
	// resume otherwise
	carousel.clip.hover(function() {
		carousel.stopAuto();
	}, function() {
		carousel.startAuto();
	});
}
	

Conclusion

This is a fairly complicated tutorial I have ever made, if you have any question at all, please drop me a comment, I will give you a hand and try my best to help you. I applied this script to a commercial website and it's well tested accross different browser such as IE6, IE7, IE8, Firefox, Chrome, Safari and even iPhone Safari. They all behave the same and look identical.

I hope you will get something out of this tutorial, grab a plugin, customize it and build a unique jQuery script that everyone would envious about it. :)

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

141 comments

Qaysar
Tue, 6th December 2011
Hello,

I wanted to know if their was a way to get the image on the left move when the slider on the right scrolls to next image.

Thanks Reply
Jboki
Mon, 23rd April 2012
same question ... I want the pictur eon the left to move as well while the stuff on the right scrolls. Reply
Theo
Wed, 7th December 2011
Is it possible to increase the slideshow-main or the slideshow main-li to a larger size. Such as to like 640px X 350px for example. If it possible do you change the html and the css both? Reply
Kevin Liew Admin
Wed, 7th December 2011
You just need to tweak the CSS. Reply
theo
Wed, 7th December 2011
I noticed that the downloaded zip file only contains plugin stuff for the jCarousel, do we have to download any other jQuery plugins stuff as well? Reply
Kevin Liew Admin
Wed, 7th December 2011
The zip contains everything you need. Reply
Simon
Tue, 27th December 2011
hi Kevin... i cant seem to make the main image to change (<div id="slideshow-main">) when i try to dynamically use data from the server using php. this is what i use

$i=1;
$query = "SELECT * FROM users INNER JOIN wall ON users.user_id = wall.user_id WHERE wall.user_id=" . $_GET['uid'] . " ORDER BY wall.idate DESC LIMIT 7 ";
$result = $db->sql_query($query);

if($dr = $db->sql_fetchrow($result))
{
if ($i == 1)
{
echo '<li class="p1 active">';
}
else if ($i > 1)
{
do
{
$i++;
echo '<li class="p'.$i.'">';
}
while ($i<=7);
}
echo '<a href="#" >
<img src="'. $dr['wall_logo'] . '" width="330px" height="290px" alt="" /></a>
<span class="opacity"></span>
<span class="content"><h1>' . $dr['title'] . '</h1><p>' . $dr['description'] . '.</p></span>
</a>
</li>';
}


can you help me???
thanks in advance
Reply
simon
Tue, 27th December 2011
Hello i have a problem i cant seem to make the main image to change when i click on a thumbnail using php. the code i wrote is this... thanks in advance
$i=1;
$query = "SELECT * FROM users INNER JOIN wall ON users.user_id = wall.user_id WHERE wall.user_id=" . $_GET['uid'] . " ORDER BY wall.idate DESC LIMIT 7 ";
$result = $db->sql_query($query);

if($dr = $db->sql_fetchrow($result))
{
if ($i == 1)
{
echo '<li class="p1 active">';
}
else if ($i > 1)
{
do
{
$i++;
echo '<li class="p'.$i.'">';
}
while ($i<=7);
}
echo '<a href="#" >
<img src="'. $dr['wall_logo'] . '" width="330px" height="290px" alt="" /></a>
<span class="opacity"></span>
<span class="content"><h1>' . $dr['title'] . '</h1><p>' . $dr['description'] . '.</p></span>
</a>
</li>';
} Reply
Kevin Liew Admin
Mon, 2nd January 2012
I think it's best to paste the generated HTML code. Reply
Menachem
Wed, 25th January 2012
Hi, Thx for the great guide. Just a quick question: Is it possible to nested another horizontal carousel within this carousel. That for example, option 4 will have another carousel inside?

Thanks. Reply
Kevin Liew Admin
Tue, 7th February 2012
I think it's possible, but it will be too a bit complicated. Reply
dean
Wed, 1st February 2012
Hi. I am trying to use jcarousel to display some jpgs of book covers for some ebooks. I want the images to autoscroll. That much i have been able to get to work. The last thing I am trying to do is get each image to have a href that points to a separate page on my website that has the excerpt, pricing, where available information at. But when i assign a href for each image the images no longer will scroll, automatically or by clicking the next arrow. Any examples someone can share showing how to get the autoscroll to work while allowing links to pages with more detail about each book. Thanks Reply
Del
Tue, 27th March 2012
Hi Great slider is there a way to make the big image fade in and fade out or slide left to right?

Many thanks Del Reply
britain
Sun, 1st April 2012
How to insert it on a site WordPress? Possible to have the function "comment-thumbnail"?
Thank you Reply
zero
Thu, 3rd May 2012
This does not work with jquery-1.6.2.min.js Reply
Kirill
Mon, 21st May 2012
ty for this
i have a question
ive made a 2xCOLUMNS list of thumbnails (160px width container and 80px width thumbs)
and the problem is that scrolling doesnt stop at last thumb, it scrolls down to empty space to the same portion of thumbs (2x scroll space)
what can i do to /2 the scrolling space

ps: link to example of my gallery http://dchevents.ru/index.php?page=authors-invitation-designers-packaging Reply
Kevin Liew Admin
Tue, 22nd May 2012
Hi Kirill,this carousel doesn't work that way. You might want to use this plugin instead:
http://coolcarousels.frebsite.nl/c/6/ Reply
Matthew S
Fri, 8th June 2012
Hi Kevin,

Great Tutorial! Just wanted to find out how to set the Carousel to make the main image change when the carousel on the right side changes to a new image (IE if the carousel goes from image 1 to image two how can I have it also change the main image in the image gallery from image 1 to image 2).

thanks!

Matthew Reply
Jens
Thu, 14th June 2012
hi,

How can I put the slider under the big picture?
And i would like the Thumbs horizontally.

Thx Reply
Kevin Liew Admin
Thu, 14th June 2012
In the javascript, you can try to change this to false:

vertical: true, //display vertical carousel

I'm pretty sure you will need to fiddle with the CSS.

Otherwise, you can have a look at this solution
http://favbulous.com/post/628/create-and-style-an-image-slider-with-thumbnail-carousel

Reply
Jalal Khan
Wed, 22nd May 2013
Thank you Kevin Liew!

It's very importent to me... Reply
adi
Tue, 19th June 2012
i want to know how i create different images gallery. and when i click on 1 gallery it opens all picture of that particular gallery. if you have that kind of pic gallery then please help me out. thansk Reply
Kevin Liew Admin
Tue, 19th June 2012
hmm, I don't have that one. Reply
nico
Thu, 19th July 2012
Fantastic for its simplicity - except when clients get involved.
Can the left hand images scroll as well (Simultaneously) Reply
Kevin Liew Admin
Thu, 19th July 2012
hmm, no. Not in this example. Reply
Nico
Sat, 11th August 2012
Come on Kevin - How do I get the slideshow-main to also slide and still keep the link Reply
bonita
Sat, 1st September 2012
is it possible to make the main image change by the change of thethumbs? like it always shows the topest thumb when the caresouell change one by one! Reply
Mike
Wed, 3rd July 2013
This issue was resolved by a clever programmer named Joy over on StackOverflow: http://stackoverflow.com/questions/10861173/jquery-image-gallery-with-jcarousel-with-changing-preview

Here is Kevin's demo with Joy's tweak: http://stackoverflow.com/questions/10861173/jquery-image-gallery-with-jcarousel-with-changing-preview

Thanks for the original example/guide Kevin, helped me a lot for my site, and I know the above tweak will help other people too! Reply
sayan
Mon, 10th September 2012
Really nice post.Just as an information if anybody interestes in jcarousel with pagination have a look on this

http://fundapass.blogspot.in/2012/05/hello-syntaxhighlighter-function.html
Reply
mike
Wed, 12th September 2012
Great Slider... question: is it possible to do for the main image to show from a mouse-over of a thumbnail instead of clicking the thumbnail to see the main image. if so.. how? thanks appreciate your time Reply
mike
Fri, 14th September 2012
i want the main image to be shown by hover or mouse over of the thumbnail. Reply
kungkelian
Thu, 27th September 2012
Hello,

I'm sorry to distrub you

but I wanted to know how to [display:none] the next arrow when a thumbnail less than 5 pic.

sorry about my english.

Thank you so much Reply
hammad rana
Wed, 10th October 2012
thanku very much queness Reply
Kerry
Wed, 9th January 2013
Hi I am trying to add in the external controls from Sorgalla's jCarousel example. I can place the controls in and get them working but just not how i would like it. I would like the external controls to act the same way as when you click on an image, the image to become highlighted/ active and the appropriate title to come up for that image. At the moment all the external controls do is move the slider to the first spot. Ideally I would like the active image to move to the center of the slider.

I have my code here http://jsfiddle.net/kasbolt/KpWnq/9/

Also is there a way to make it circular rather than wrap. Every time I put in circular than wrap it breaks the carousel by adding in empty spaces where images should be.

Any help would be appreciated as my jquery is limited. Thanks
Reply
bernard
Sat, 2nd March 2013
thank you Kevin, this is perfect for my projekt.
how can i set this in an unique and seperate slider because i want to use it for each project on my page. also i will get manies of this slider on one page. (sorry for my bad english :s
Reply
reynante
Sun, 14th July 2013
those are very useful codes Kevin, thanks a lot.... Reply
J!
Wed, 31st July 2013
Don't really like the fact that every image has to be preloaded. It should be possible to make it, so it will load the image once to thumb is clicked. Reply
Long
Tue, 27th August 2013
Hi,
Can the slideshow-main auto slide?
Thank advance! Reply
Kush
Sat, 21st December 2013
Hey,
Is there a way by which i can change the click listener to hover listener for the next and previous arrows in the ul??? Reply
clipping path service
Thu, 27th February 2014
thank you for your post Reply
maz
Sun, 9th March 2014
this makes no sense, instead of re-factoring and quarantine necessary
logic of the gallery everything has been abstracted away as if the rest of us has some knowladge about the inter processes of the gallery

i would say this is an example of a purely needless abstraction of a so called gallery plugin that in itself might work fine, or even very well (suited the situation) but as a stand alone component makes no sense at all

amateurish. Reply
Crispylogs
Sun, 9th March 2014
easy to use gallery, thank you so much.... Reply
Nivediny
Mon, 17th March 2014
It worked well...... Thank you :)

Reply
mahsa
Mon, 21st April 2014
hi
how can i make it dynamic
work with DB
.......................
please answer admin :( Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement