jQuery Image Gallery/News Slider with Caption Tutorial

jQuery Image Gallery/News Slider with Caption Tutorial


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.

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 src="images/pier1.jpg" width="300" height="186" alt=""/></li>
		<li><img src="images/pier2.jpg" width="300" height="186" alt=""/></li>
		<li><img 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 src="images/pier1.jpg" width="300" height="186" alt=""/></li>
		<li class="item2"><img src="images/pier2.jpg" width="300" height="186" alt=""/></li>
		<li class="item3"><img 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!

Demonstration Download

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

168 comments

khaled
Mon, 21st November 2011
this is a great tutorial .... but i have a question about the caption!
way empty caption still working if i delete one or more image?
regards Reply
Dai
Wed, 7th December 2011
i followed your tutorial and use the exact same js, but the caption is not working.. Reply
Mahendra
Tue, 13th December 2011
Its very nice...... Reply
Marc Hesp
Mon, 19th December 2011
Thank you for this wonderful slider.
I'm having some trouble positioning the excerpt properly (in my case on the right side), but I'm sure I'll work it out.
There appears to be an error in the CSS, the z-index for the #excerpt is 500px. I believe this should be a numeric value? Reply
Kevin Liew Admin
Tue, 20th December 2011
You're right! I have updated the post and demo. Thanks. Reply
Juan
Wed, 5th September 2012
Necesito licencia para usar en mi website? como hago para comprarla Reply
jafar damirchi
Tue, 3rd January 2012
thank you a lot for this tutorial.

I had tried to wrote a slider with callback functions...

$("div").fadeTo(3000, 1.0, function(){ $(this).fadeTo(3000, 0.0 , ... /* and more callbacks to run one after anoter */) });

but this technique is not really work.

thank you that remember me to USE setInterval(); and clearInteral();
Reply
Djizou
Fri, 20th January 2012
Nice tuto. But I guess your z-index are useless because your nodes are well placed in the DOM. Reply
seb
Sat, 4th February 2012
hi all, i have the same issue as Chelsea when i want to set the excerpt to the bottom. i kave made the Kevin's modifications lines (my mask is at the right place) but there is no more scroll for the excerpt li.
All the li appear in the same excerpt. and it's always the same.

thx for help
Reply
seb
Sat, 4th February 2012
no matter my issue, i've solved it.
the equation must be respected : #excerpt li height = #mask excerpt height AND #excerpt li height + #mask excerpt top= #slider.height

Special Thanks for your wonderfull slider !!! Reply
Dons
Sun, 15th April 2012
This is awesome. It works brilliantly. Reply
marky6
Sat, 28th April 2012
excellent post.. can this run on blogger blog? awaiting respond Reply
Mike B
Sun, 29th April 2012
Thanks for this great tutorial but I have one main issue with it and it is the time between the scrolls is very unstable, starts at longer than the set time then at times when a new image comes into position it barley stops and moves to the next... is there any way to make the timer more accurate and stable? Reply
lloyd
Thu, 24th May 2012
good day sir.... can i ask question? how do i know on the #links if it is the current image? Reply
Jay
Thu, 12th July 2012
I like this slider, but I would like to have the pictures and description in a list library and pull it in. How would I do this?
Reply
Sugumarje
Tue, 24th July 2012
Thanks Dude! Reply
Duy
Mon, 13th August 2012
Hey there great tut, but it seems my pictures are not sliding at all... I followed everything in the tutorial. But it seems I have to type something in HTML to make it run... and I don't know what please help. I have .js files as separate and also .html and .css is separate. i link them all in source file. Reply
Mtt
Fri, 2nd November 2012
I have the same problem Duy :| Appears all correct but no action. Reply
SoloSheff
Mon, 13th August 2012
Thanks for the tutorial. It works great, but I do have one concern. Is there a way for the carousel to flow to the first image as if it were the next image and not rewind back to the beginning? The current set up seems counter intuitive. Reply
Henrik
Thu, 16th August 2012
Hi Kevin ...

Nice tutorial and it works.

Instead of having static links to images I want to put in a query to get random images to show up. How can this be applied to the code?

Best regards
Henrik Reply
Mufeed Ahmad
Sun, 26th August 2012
Awesome,

i have one issue ..

actually i want to control slides also with a drop down menu instead of simple paging and the text has to synchronize once user clicks on next and previous button.

Please suggests???

thanks for sharing with us and plz keep doing...
Mufeed Ahmad

Reply
Mufeed Ahmad
Sun, 30th September 2012
DONE it.. but was expecting a hear back from you Kevin.. anyway thanks

have an another issue...

if i try more than three slides it doesn't work well with paging.. like if I do click on 4th slide, it jumps back, but it should be next.

please help!

Many thanks,
Mufeed Ahmad Reply
Mufeed
Sat, 3rd November 2012
Resolved.. Reply
Emjay
Mon, 17th September 2012
I have problems with pulling images and title(excerpt) from mysql database. only one image and title is display. Reply
Emjay
Tue, 25th September 2012
ok, i can now display images correctly but not with the title or caption, please help or advice thanks. .. Reply
Zaq Cruze
Thu, 4th October 2012
Is there a simple way to include multiple galleries like this on the same page? I looked at editing the ids into classes, but ran into issues with that. When I had to galleries on a page the buttons also only affected the first gallery (I assume the javascript funtion was only being run on the first slider). Any help would be appreciated, thanks. Reply
pixtty.com
Thu, 6th February 2014
nice article :) Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement