Create a Custom jQuery Image Gallery with jCarousel

Written by Kevin Liew on 20 Apr 2010
193,236 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
יחסי ציבור 13 years ago
Thanks for helping me setting that up!
Reply
Vijay 13 years ago
I tried to use this. However, in IE8, when clicking on the picture to display in main part, it is not displaying the picture but displays only the <span> with description at the top.

Reply
goldeneyes 13 years ago
Great work!
I need your help, how could this image Gallery to show big pic one by one, now I must click one to show it's big pic
Reply
Kevin P 13 years ago
I've got Noscript enabled on my computer (program that prohibits sites from running javascript without user permission) and I was wondering is it possible to develop the carousel so that even with Javascript disabled it is possible for user to manually operate the carousel as when I first visited your site I couldn't use the carousel (Yeah I know Jquery is all about javascript but there's always some weirdo who's got javascript disabled! oh like me!
I have seen another example of a jquery carousel that can work with javascript disabled but I really do like your version.Thanks keep up the good work!
Reply
Kevin Liew Admin 13 years ago
Hi, yes it's possible, but it will require initial planning to make it degrade gracefully. this tutorial somehow doesn't start it that way, and the combination of two plugins make it even harder to make it accessible even if javascript is disabled.
Reply
Lil 13 years ago
Thanks for the tutorial! I'm a bit new to JQuery - can I use JCarousel to make something like this: http://ideacouture.com/who-we-are/nick-sutcliffe ?

Basically when a thumbnail is clicked from the Carousel, different HTML content appears below (actually, the thumbnails don't have to be on a carousel).

Any suggestions?

- Lil
Reply
Kevin Liew Admin 13 years ago
Well, you can use this jcarousel plugin: http://sorgalla.com/projects/jcarousel/

From the way it looks, every single person has a page, so, bsically you just link the item in the carousel to a new page. that's it.
Reply
Chad Tornabeni 13 years ago
I would like to add left and right arrows to the main big images (horizontal menu) and take off the ones on the vertical menu. Can anyone help me on how to do this?? I just have 3 images so dont need to scroll vertically but would like people to know the can scroll to next image.

Thanks
Reply
Kevin Liew Admin 13 years ago
That will be a bit tricky because the arrows are generated by jCarousel plugin. I'm pretty sure it can be done, you just have to move the arrows to the position you want.
Reply
Joanne 13 years ago
HI just come across jcarousel and its perfect for what I need, but i would love it if the side menu that is rotating shows the corresponding large image at the same time its rotating, is this possible?
Reply
Kevin Liew Admin 13 years ago
it actually possible because i made it before. http://myfun.com.au/
It's kinda like a hack, you will need to refer to that site.
Reply
Matic 13 years ago
Could you point me at key changes? I was going through the code of that page and I got really confused.
I'd really appreciate the reply.

Thank you.
Reply
Surya 13 years ago
Hi , I am facing same Problem . Did you got any solution ? if yes please share.
Reply
dave barell 13 years ago
Hello I would love to know how to do this as well, I have tried dissecting your page to get to the content and trying to copy over the div/css layout but it seems to be overwhelming - a guide on how you did this would be much appreciated : )

Brillant job btw!
Reply
John 13 years ago
I was just thinking about this - I tried to solve the code of page http://myfun.com.au/ (brilliant page) but I was lost in it.
Can you explain the solution of "two carousels in one" please?
Big thanks for anwer !
Reply
Jdmc 13 years ago
Hi there Kevin,

Great tut…. Was trying to get a step further by creating a multiple carrousel (2 carousels on 1 page) example on Jan Sorgalla, but I getting confused creating the second slide show main + second carousel was wondering how to solve this multiple carousel. Hope you can help me out.
Thanks and keep on going… helping a lot of people!!
Reply
Kevin Liew Admin 13 years ago
it will be pretty hard to make another instance. As you can see, in the jquery script, there are a lot of ID being called. it's possible, but you will need to mod those ID in the script carefully. Second solution, will be duplicate the whole script and change all the ID to something else.
Reply
Jdmc 13 years ago
I tried that and it works, but was wondering if you could do the same as the example of Jan Sorgalla > multiple Carousel. Another question: is it possible when clicking on the Big image you get a full screen version using something like jQuery Lightbox
Reply
Kevin Liew Admin 13 years ago
Yes, it can be done. what you have to do is, choose a lightbox. Pretty sure you need to add a class name or id to the anchor tags for all items in #slideshow-main to activate the lightbox.
Reply
optimizacija sajtova 13 years ago
Nice work. Thank`s!
Reply
Kim 13 years ago
Hi! Great plugin!

Question. I have it all set up and working just fine. However, when I set the wrap to "circular" so I can go 100% forward and 100% backwards, it shows endless blank thumbnails when trying to go backwards from #1. Any idea why this is happening? I have about 50 thumbnails I am scrolling through. Works fine going forward, just not backwards. Thanks!
Reply
Dan V 13 years ago
Yes, this is the only issue. Most (novice) users will click the top arrow and it will not do anything and they will think its broken. Would be good if it looped to the last image. Please let me know when / if you can get this implemented.

Cheers!
Reply
F G 13 years ago
There is a configuration option you can put in the <head> section when defining all of the carousel's attributes that allows it to be a circular carousel where you can scroll all the way forwards and all the way backwards. If that's not set up correctly it might cause the problem :S Other than that I'm not sure. Good luck though!
Reply
Heston 13 years ago
This is a HUGE help. Thanks for putting this together. One issue I'm having, though. The main changes I made were turning it into a horizontal slider and then putting it into a table. It works perfectly on Chrome and IE9, but on IE7 (what I have a work), it operates correctly but when you put your mouse over the carousel, it makes the entire webpage get way too wide. Any ideas why?
Reply
Kevin Liew Admin 13 years ago
hmm, not so sure what's happening, I think it could be CSS issue.
Reply
Qamar 13 years ago
hi , i m use jcaousel in my php project but its not work there is "Jquery is not defined error" now what i do....? plz help
Reply
Kevin Liew Admin 13 years ago
Did you install jQuery probably? Right path?
Reply
Pagial 13 years ago
hi, if i want to place a button with the option to remove the plugin, what code will i need?
Thanks
Reply
Kevin Liew Admin 13 years ago
I thnk you just need $('#welcomeHero').empty();
Reply