jQuery Image Gallery/News Slider with Caption Tutorial

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.

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.

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');					
}

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!

• TAGS:
• CSS
• HTML
• Javascript
• jQuery
• Tutorial