Create a Custom jQuery Image Gallery with jCarousel

Written by Kevin Liew on 20 Apr 2010
167,451 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
Gislailson 10 years ago
vlw cara, gostei muito deste tutorial
:D
Reply
Emma Gallagher 10 years ago
Hello,
Thank you so much for making this!
I just need to change some things and am not sure how to do it.
1. I only want the bigger image to appear when you hover over an image in the carousel. I have changed the click function to hover so that works instead of clicking.
2. I'd like both of the arrows to be above and below the carousel rather than on top of the images.
I'm very new to jquery so could only really cope with detailed help!
Many thanks
All the best
Emma
Reply
Kevin Liew Admin 10 years ago
This tutorial is showing how to make two scripts work together... you will need fair a bit of knowledge to be able to do it.

1. I think you can just replace the images, it should work.
2. I think the plugin style it, use firebug to identify the class, then style it by setting the top and bottom positionvalue.
Reply
Emma Gallagher 10 years ago
Hello,
I just wrote to you asking about the position of the arrows.
I've managed to figure that uout by myself. What I really need to know is how to turn off the visibility of the slideshowmain unless you have the mouse over an item in the carousel which is when I want the larger image to pop up.
Thank you so much for your help.
Emma
Reply
Kevin Liew Admin 10 years ago
hmm, you will need fair a bit of modification though. You can try moving the click event content to mouse over... but I'm pretty sure it will be quite buggy.
Reply
Emma Gallagher 10 years ago
Thank you - yes I've been trying to modify it and am not having much success. I don't understand the combination of jquery and css well enough. I need to make a scrolling vertical carousel with image which pop up on mouse over.
You don't know where I could find one?
Best wishes
Emma
Reply
Kevin Liew Admin 10 years ago
Do you mean, a vertical carousel, when mouse over, a "tooltip" with a larger version of the image will be displayed? If yes, you just have to use the jCarousel plus a tooltips that support images.
Reply
Chris 10 years ago
Thank you for a great tutorial. What would I change to have 4 images displayed down the right instead of 3?
Reply
Kevin Liew Admin 10 years ago
You will need to change it in CSS.
Reply
nematoad 10 years ago
This is the a great little piece of DHTML code. has anyone used this to setup an full service gallery, where you can upload to a webserver too?
Reply
Jen 10 years ago
Thank you for such a great gallery & tutorial, easy to understand and modify. Great work!!!! :-D
Reply
kenio 10 years ago
Great script! i really enjoy it.

But i would like to make animation transition on big image when i click on thumbnail.

How i can make it?
Reply
Kevin Liew Admin 10 years ago
line 62, I added show animation which will fadeIn:
$('div#slideshow-main li.' + $(this).attr('rel')).show(300)..addClass('active');

you can do simple animation.
Reply
kenio 10 years ago
I must say i don't know .js, i paste your code on line 62 but nothing happen, after that i remove
$('div#slideshow-main li.' + $(this).attr('rel')).addClass('active'); from line 53,
and add your code in this 53 line and it's working, but every single click at thumbnail is making new 'li' in #slideshow-main with style 'display: list-item;' so depends on how much thumbnail was clicked, i got same number of opened big images at the left. For sure i went something wrong, but have no idea what..
Reply
John 10 years ago
I have the same problem. Does anybody know, how to solve?
Thnkx
Reply
Matthieu 9 years ago
I have a solution to avoid the new "li" but i'm not sure of the structure.
First, to do the animation :
- Line 53 you have to add ".fadeIn(1000)" before ".addClass", it will be do the animation which you can change the duration.
- and after that, paste the code : "$('div#slideshow-main li.' + $(this).attr('rel')).fadeOut(0).addClass('active');"
Reply
Gagan 10 years ago
I needed this one thanks alot :)
Reply
esther 10 years ago
Hi, this is really great!! Thanks a lot. Only I would like to make the thumbs go vertical. How can I change this into a vertical carousel with the arrows on place? When I change it to vertical, the arrows to go next/prev are gone.
tnx in advance
Esther
Reply
designdim 10 years ago
very useful post i really like this carousel. thanks for the post
Reply
Andrea 10 years ago
Hi Kevin,
This is fabulous, and 99% of what I need for a client.
I am trying to adjust it and am wondering if you can help.
Is there a way to keep the hover functionality (the slideshow stopped) when rolling over the arrows? I've been banging my head against the wall on this one; your help is much appreciated.

thanks
Andrea
Reply
Kevin Liew Admin 10 years ago
Not so sure, but you can try. According to jCarousel doc: http://sorgalla.com/projects/jcarousel/#Configuration
it has called back function for buttonNextEvent and buttonPrevEvent, not sure if you can hook hover effect on it.

And you will need this two commands to stop and resume the carousel:

carousel.stopAuto();
carousel.startAuto();

otherwise, the easier method would be using jQuery and append hover funtion to the next and prev link.
Reply
Andrea 10 years ago
Thanks Kevin
Yes, I made the "next" link transparent to function that way- how would I use jQuery to append the hover function as you suggested?
Reply
saad waaziz 10 years ago
hi :)
Thank you for this great tutorial !!!!!
I have 1 question please :)
What would I do to have 5 or 6 images displayed down the right instead of 3 ?
I already tried changing the css code but unfortunately I failed I think it is not possible to change the css fileand I can not find the <DIV class = .jcarousel-skin-tango .jcarousel-clip-vertical...
I test onFireBug - MozzilaFireFox I increase the height and it works but how to save this
I also believe that the height of the block is generated by jquery so how can I find the corresponding line code

cordially :)
Reply
Kevin Liew Admin 10 years ago
I think you will need to go to jCarousel for its documentation.
http://sorgalla.com/projects/jcarousel/#Defining-The-Number-Of-Visible-Items
Reply
saad waaziz 10 years ago
thank you Kevin Liew for the link I forgot the documentation is very important. it helped me well thank you also to respond so quickly :)
Reply
Saad waaziz 10 years ago
Good evening Kevin Liew I have another problem
I adopt the slider very well with my need but the problem is that the slider does not work with jQuery verssion now available for download in jquery.com
because I have other slide on the homepage under my site and when I put the jquery " jquery-1.4.2.min.js " of your slide the other sliders do not work anymore :(
is there any other version except " jquery-1.4.2.min.js " that works well with your beautiful slide?
Reply