Create a Custom jQuery Image Gallery with jCarousel

Written by Kevin Liew on 20 Apr 2010
167,449 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
Ant Cullen 10 years ago
Found your tutorial at the end of a long day trying, failing and trawling Google - it formed the basis of a working solution integrating the Jquery carousel and Nextgen Gallery on Wordpress - thanks, and I'll post up the finished articel in a day or so!
Reply
twoclicks 9 years ago
Hi kevin,

I was intend to get the img source of the 'active' state everytime the user clicked on and store it in a variable to be use in conjunction with PHP. Would you mind if i ask how could that be implemented ? i had read the documentation of the callback function but that doesn't seems to be able to answer my question. And thanks for sharing the tutorial btw.

Thank You.
Reply
mike 9 years ago
I want to play video instead of displaying the image. Can I do that with this plugin?
Reply
Kevin Liew Admin 9 years ago
hmm, no.
Reply
NicoB 9 years ago
You can: www.nicob.co.za - click on the motion
Reply
SMR 9 years ago
I want to implement multiple carousel with image navigation(image index) in same page. I implemented this. But the problem is when i click next button in one carousel, all the the image navigation text will change. How i can overcome this problem.. help me.. Thanks
Reply
Chetan 9 years ago
Hi Kevin,

I want to implement a gallery some think like http://www.skysports.com . So there will be only 3 image. The main image will show on the LHS and the other two will appear on RHS, also I require a click event on the RHS images.It should work exactly the same way as above url. Please let me know if we can use the above carousel.

Regards

Chetan
Reply
Kevin Liew Admin 9 years ago
It sounds exactly like what it does, you can use it.
Reply
Sho 9 years ago
how would i do this using two jcarousels, images in the 1st carousel link to images in the 2nd carousel, is it possilbe
Reply
Kevin Liew Admin 9 years ago
Cant do it in this example, but check this out from our sistersite
http://favbulous.com/post/628/create-and-style-an-image-slider-with-thumbnail-carousel
Reply
Eduardo 9 years ago
Kevin thanks for this awesome carousel. i have a question, after readingcarefully the documentation i cant resolve this: i want to show 4 images only on the vertical carousel, the question is: i want to remove the upper and lower scrolling arrows, or at least not showing them. any help would be gratefully appreciated. best regards
Reply
Kevin Liew Admin 9 years ago
Basically, what you want is remove the functionality of carousel on the right hand side. You can remove the carousel script, and style the right hand side so it fits 4 images. The rest should work fine.
Reply
Erik Turner 9 years ago
Thank you for this excellent demo of a content slider. I've downloaded this demo and was able to modify the image, text, and size of the panels pretty well with no problem.
I was wondering what I would have to do to change the panels on the right from vertical to horizontal.

Thanks a bunch
Reply
Kevin Liew Admin 9 years ago
It should be fairly straight forward, just make sure you have a backup first. You can start it off by changing this value in the script (line5) to false:

vertical: true, //display vertical carousel

after that, you will need to style it the way you one. finger crossed x :)
Reply
Qaysar 9 years ago
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 9 years ago
same question ... I want the pictur eon the left to move as well while the stuff on the right scrolls.
Reply
Theo 9 years ago
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 9 years ago
You just need to tweak the CSS.
Reply
theo 9 years ago
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 9 years ago
The zip contains everything you need.
Reply
Simon 9 years ago
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 9 years ago
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 9 years ago
I think it's best to paste the generated HTML code.
Reply