Create a Custom jQuery Image Gallery with jCarousel

Written by Kevin Liew on 20 Apr 2010
193,246 Views • Tutorials

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 data-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 data-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 data-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 data-src="images/1.gif" width="206" height="95" alt="#"/></a></li>
			<li><a href="#" rel="p2"><img data-src="images/2.gif" width="206" height="95" alt="#"/></a></li>
			<li><a href="#" rel="p3"><img data-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. :)

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

145 comments
Menachem 12 years ago
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 12 years ago
I think it's possible, but it will be too a bit complicated.
Reply
dean 12 years ago
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 12 years ago
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 12 years ago
How to insert it on a site WordPress? Possible to have the function "comment-thumbnail"?
Thank you
Reply
zero 12 years ago
This does not work with jquery-1.6.2.min.js
Reply
Kirill 12 years ago
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 12 years ago
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 12 years ago
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 12 years ago
hi,

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

Thx
Reply
Kevin Liew Admin 12 years ago
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 11 years ago
Thank you Kevin Liew!

It's very importent to me...
Reply
adi 12 years ago
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 12 years ago
hmm, I don't have that one.
Reply
nico 12 years ago
Fantastic for its simplicity - except when clients get involved.
Can the left hand images scroll as well (Simultaneously)
Reply
Kevin Liew Admin 12 years ago
hmm, no. Not in this example.
Reply
Nico 12 years ago
Come on Kevin - How do I get the slideshow-main to also slide and still keep the link
Reply
bonita 12 years ago
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 11 years ago
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 12 years ago
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 12 years ago
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