jQuery Image Gallery/News Slider with Caption Tutorial

Written by Kevin Liew on 29 Jul 2009
176,984 Views • Tutorials

Introduction

Until this day, jQuery is still blowing me away with its simplicity and robustness. As you can see, I have been concentrated to produce tutorials about it, and I just couldn't help it! Right, this time, we're going to learn how to create a news slider that come with the following features:

  • Slideshow with Image and description/caption
  • previous, next, pause and play buttons
  • On mouse over, pause the slideshow, and play it on mouse out
  • Sliding effect for both gallery panel and excerpt panel
  • Adjustable slideshow speed
  • And, finally, smarter script that will calculate width and height for the slideshow

We're going to use scrollTo jQuery plugin during the development. A huge thumb up and big thank you to Ariel Flesler who created the plugin.

Advertisement

Existing Tutorials

The following is my previous version of image gallery:
Simple JQuery Image Slide Show with Semi-Transparent Caption

And also, the concept that we'll be using for this gallery, it works about the same with the folowing posts, if you want a better illustrated explanations, you can read:
jQuery Sliding Tab Menu for Sidebar Tutorial, or
Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery

Explanation

For this slide show, we will combine two sliding panels together, and use the timer (setInterval function) to animate the whole thing. The image below will able to give you more understanding of the html/css layout.

So, there are several important reminders:

  • The size of the #slider should be the same size with the image
  • The total number of excerpt items must be the same with the total number of Images
  • You must set the width and height for #slider, because the script uses it to calculate the width and height for other elements
  • Z-index/ layer order is very important to make sure everything is displayed correctly
  • Buttons can be removed or styled, if you changed the button id, you have to change it in the script as well.

1. HTML

#mask-excerpt is being set to absolute position and z-index to highest so that it will appear on the #gallery. It's possible to take the excerpt out, and make it something like this: DibuSoft mmdv. Remember, total numer of #gallery items must be the same with total number of #excerpt items.

<div id="slider">

	<div id="mask-gallery">

	<ul id="gallery">
		<li><img data-src="images/pier1.jpg" width="300" height="186" alt=""/></li>
		<li><img data-src="images/pier2.jpg" width="300" height="186" alt=""/></li>
		<li><img data-src="images/pier3.jpg" width="300" height="186" alt=""/></li>

	</ul>
	</div>
	
	<div id="mask-excerpt">
	<ul id="excerpt">
		<li>Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.</li>

		<li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
		<li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li>
	</ul>
	</div>

</div>

<div id="buttons">
	<a href="#" id="btn-prev">prev</a> 
	<a href="#" id="btn-pause">pause</a> 
	<a href="#" id="btn-play">play</a> 
	<a href="#" id="btn-next">next</a>

</div>

2. CSS

This time, CSS is a bit complicated, therefore, I have added line comments to further elaborate it. Refer the to previous illustration, we have to make sure the z-index/layer order are being set correctly, and also float:left for the #gallery so that the items are arranged horizontally. For the #excerpt, we don't have to set the float, because we want it display vertically.

The arrangement of the items will decide the scrolling direction. The arrangment of items are further elabrated in this tutoria - Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery

#slider {

	/* You MUST specify the width and height */
	width:300px;
	height:186px;
	position:relative;	
	overflow:hidden;
}

#mask-gallery {
	
	overflow:hidden;	
}

#gallery {
	
	/* Clear the list style */
	list-style:none;
	margin:0;
	padding:0;
	
	z-index:0;
	
	/* width = total items multiply with #mask gallery width */
	width:900px;
	overflow:hidden;
}

	#gallery li {

		
		/* float left, so that the items are arrangged horizontally */
		float:left;
	}


#mask-excerpt {
	
	/* Set the position */
	position:absolute;	
	top:0;
	left:0;
	z-index:500;
	
	/* width should be lesser than #slider width */
	width:100px;
	overflow:hidden;	
	
}
	
#excerpt {
	/* Opacity setting for different browsers */
	filter:alpha(opacity=60);
	-moz-opacity:0.6;  
	-khtml-opacity: 0.6;
	opacity: 0.6;  
	
	/* Clear the list style */
	list-style:none;
	margin:0;
	padding:0;
	
	/* Set the position */
	z-index:10;
	position:absolute;
	top:0;
	left:0;
	
	/* Set the style */
	width:100px;
	background-color:#000;
	overflow:hidden;
	font-family:arial;
	font-size:10px;
	color:#fff;	
}

	#excerpt li {
		padding:5px;
	}
	


.clear {
	clear:both;	
}

3. Javascript

We've created a function called newsslider. Each time you call it, it will scroll to the next/prev item. This function accepts a parameter called "prev", if you set it to 1/true, it scrolls to previous item, otherwise, it will scroll to the next item.

To animate the news slider, we use a timer called setInterval function, and you can set the speed by assigning the interval value in miliseconds. It's that simple. Right, the following is the script and as usual, I have put comments in every lines to assist you. :)

	
$(document).ready(function() {

	//Speed of the slideshow
	var speed = 5000;
	
	//You have to specify width and height in #slider CSS properties
	//After that, the following script will set the width and height accordingly
	$('#mask-gallery, #gallery li').width($('#slider').width());	
	$('#gallery').width($('#slider').width() * $('#gallery li').length);
	$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
	
	//Assign a timer, so it will run periodically
	var run = setInterval('newsslider(0)', speed);	
	
	$('#gallery li:first, #excerpt li:first').addClass('selected');

	//Pause the slidershow with clearInterval
	$('#btn-pause').click(function () {
		clearInterval(run);
		return false;
	});

	//Continue the slideshow with setInterval
	$('#btn-play').click(function () {
		run = setInterval('newsslider(0)', speed);	
		return false;
	});
	
	//Next Slide by calling the function
	$('#btn-next').click(function () {
		newsslider(0);	
		return false;
	});	

	//Previous slide by passing prev=1
	$('#btn-prev').click(function () {
		newsslider(1);	
		return false;
	});	
	
	//Mouse over, pause it, on mouse out, resume the slider show
	$('#slider').hover(
	
		function() {
			clearInterval(run);
		}, 
		function() {
			run = setInterval('newsslider(0)', speed);	
		}
	); 	
	
});


function newsslider(prev) {

	//Get the current selected item (with selected class), if none was found, get the first item
	var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
	var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

	//if prev is set to 1 (previous item)
	if (prev) {
		
		//Get previous sibling
		var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
		var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
	
	//if prev is set to 0 (next item)
	} else {
		
		//Get next sibling
		var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
		var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
	}

	//clear the selected class
	$('#excerpt li, #gallery li').removeClass('selected');
	
	//reassign the selected class to current items
	next_image.addClass('selected');
	next_excerpt.addClass('selected');

	//Scroll the items
	$('#mask-gallery').scrollTo(next_image, 800);		
	$('#mask-excerpt').scrollTo(next_excerpt, 800);					
	
}

4. Pagination Addon Mod

Due to popular demand, I added a function called "goto" which allow you to go to a specific item. The following is the changes list:

  • Added a function called "goto"
  • In the html, you need to add "item class" to the image list and excerpt list. For example, both first image and description must have the same class name called: item1.
  • Added link list for the numbering.

Demonstration

Javascript

Add two functions into the javascript: The first one is for the link, and the second function is to navigate the slider.

	
//Put this inside $(document).ready()
//For link/number button
$('#links a').click(function () {
	//stop the slide show
	clearInterval(run);
		
	//go to the item
	goto('.' + $(this).attr('rel'));	
		
	//resume the slideshow
	run = setInterval('newsscoller(0)', speed);	
	return false;

});
	


//Add this function after newslider function
function goto(item) {
	$('#mask-gallery').scrollTo(item, 800);		
	$('#mask-excerpt').scrollTo(item, 800);	
	$(item).addClass('selected');					
}


HTML

Due to time constraint, the javascript won't generate the Link by itself, so you will have to add the links. This is how you should add the code:

  • #gallery list : the first item should call item1, second, item2 and so on.
  • #excerpt list : the first item should call item1, second, item2 and so on.
  • #links : the first link should have an attribute rel set to item1, second, item2 and so on.
	
<div id="slider">

	<div id="mask-gallery">
	<ul id="gallery">
		<li class="item1"><img data-src="images/pier1.jpg" width="300" height="186" alt=""/></li>
		<li class="item2"><img data-src="images/pier2.jpg" width="300" height="186" alt=""/></li>
		<li class="item3"><img data-src="images/pier3.jpg" width="300" height="186" alt=""/></li>
	</ul>
	</div>
	
	<div id="mask-excerpt">
	<ul id="excerpt">
		<li class="item1">Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.</li>
		<li class="item2">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
		<li class="item3">Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li>
	</ul>
	</div>

</div>

<div id="buttons">
	<a href="#" id="btn-prev">prev</a> 
	<a href="#" id="btn-pause">pause</a> 
	<a href="#" id="btn-play">play</a> 
	<a href="#" id="btn-next">next</a>
</div>
<div id="links">
	<a href="#" rel="item1">1</a>
	<a href="#" rel="item2">2</a>
	<a href="#" rel="item3">3</a>
</div>


<div class="clear"></div>

Conclusion

So, here you go, you've just learnt how to create a news slider for your website. It isn't that hard after breaking it into smaller chucks. I hope it helps you to learn more about jQuery.

Last but not least, I need your support :) If you like this article, please help me to promote it by adding this post to your bookmark, subscribe to my RSS for more jQuery tutorial and design inspiration posts! AND also, you can BUY ME A DRINK (link in the footer) to motivate me and keep me awake! Thanks!

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.

168 comments
not2comply 15 years ago
Excelent work Kevin. I've been messed up for weeks trying to figure it out by myself, and here you are, made 'em easy for us all ;)
Thanks for sharing..
Reply
Ezrad Lionel 15 years ago
I know it\\'s more work but any gallery that snaps right back to the start instead of \\'wrapping\\' is a fail. Also FU captcha!!
Reply
Eric 15 years ago
This is nice! I was in search of something like this and went the way of the S3Slider....i think that was what is was called.
I then found one other extremely simple method...I do not recall the origin on the one in use on http://www.PinkPlaybook.com ">A CLIENT's SITE but it is probably in the midst of my code...just check and see. But this code is set up with the ease of editing the information...so I am going to transit to this Slider...
KEVIN QUE ARE THE MAN! LOL That was just cheezy! LOL
IN OTHER WORDS>>> THANK YOU!
Reply
dlv 15 years ago
i love it! it's the way Wordfolio (wordpress theme on themeforest marketplace) play.

Excellent, thanks for share as always... i love this site !
Reply
didxga 15 years ago
thanks a ton for sharing your skills!
Reply
c.bavota 15 years ago
Thanks for the great tutorial. Just one question: Is it at all possible to make the slideshow not have to rewindto the first image one the last image is reach, but instead just move forward to the first image like an infinite loop?
Reply
c.bavota 15 years ago
Man, I need to read my comments before I submit them. The question should read, "Is it at all possible to make the slideshow not have to rewind to the first image once the last image is reached, but instead just move forward to the first image like it was an infinite wrapping loop?"

Sorry about that.
Reply
Eric 15 years ago
Where in the javascript can you add a function that hides the previous link (btn-prev) when it is on the first slide.
Reply
Eric 15 years ago
How can you make it so the arrows keys left and right will change the slide?
Reply
Nacho 15 years ago
Hey how can i change the "excerpt" to be horizontal?

i try it but i get a big mess doing it.
Reply
kevin Admin 15 years ago
Hi Nacho, I believe this will do the work:
Add the float:left in #excerpt
#excerpt {
......
float:left
......
}

the scrolling work according to the way you arrange it LI, at the moment, it's arranged vertically. so, if you put float left, the LI will display in a row. Don't have to worry bout the scrolling direction, the plugin will work itself out of it. Let me know if it works. :)
Reply
kevin Admin 15 years ago
change the css to:

#excerpt li {
padding:5px 10px 5px 5px;
width:90px;
float:left;
}

#excerpt {
width:400px;
}

I have tested it, should work :)
Reply
Nacho 15 years ago
Thanks kevin but is not working :S i make a few trys and it moves but when i move it dosen't show the other news and sometimes when change the news go back to the original place.

Thanks!
Reply