jQuery Photo Slide Show with Slick Caption Tutorial Revisited

jQuery Photo Slide Show with Slick Caption Tutorial Revisited


jQuery Photo Slide Show with Slick Caption Tutorial Revisited

Introduction

If you have been reading my website from the start you would have read this tutorial:

Simple jQuery Image Slide Show with Semi Transparent Caption

It's a very famous post because it has been showcased in several major web design blogs so many times and I received a lot of traffic from it. Thanks guys. I get a lot of comment and as I replied to those comments and do some quick fixes, I realized that this script has a caption bug and inefficient and not up to standard (oh well, that's the time when I was start picking up jQuery :)), so I have decided to do revisit to solve all those problems discovered by readers. I rewrote the html structure and modify the script.

Mission Objectives:

  • Restructure the HTML, more semantic
  • Fix the caption bug, it displays the next caption too fast
  • W3C standard compliant, using appropriate attribute to store title and description
  • Cross Browser - Chrome, Safari, IE6, 7, 8 and Firefox.

However, one thing though, it needs javascript, if your browser is javascript disabled, sorry, there is no graceful degradation for this script, it will just display the first item.

Advertisement

1. HTML

Yes, I'm using list this time :) This is how it should have been afterall. No more REL attribute, we wil be using TITLE Attribute to store the heading and ALT attribute to store the description. For the caption elements, it will be added using jQuery. So, this is it - a clean and simple HTML code.

<ul class="slideshow">
	<li class="show"><a href="#"><img src="images/s1.gif" width="450" height="200" title="Slide 1" alt="Short Description"/></a></li>
	<li><a href="#"><img src="images/s2.gif" width="450" height="200" title="Slide 2" alt="Short Description"/></a></li>
	<li><a href="#"><img src="images/s3.gif" width="450" height="200" title="Slide 3" alt="Short Description"/></a></li>
</ul>

2. CSS

CSS code is rewritten completely. I guarantee it's cross browser compliant. They all look identical and it works great :) I did learn a lot of CSS technique through this blog. We all can improve our skills through tips, tricks, trials and errors. Read these posts to learn more about CSS:

body {
	font-family:arial;	
	font-size:12px;
}

ul.slideshow {
	list-style:none;
	width:450px;
	height:200px;
	overflow:hidden;
	position:relative;
	margin:0;
	padding:0;
	
}	

ul.slideshow li {
	position:absolute;
	left:0;
	right:0;
}

ul.slideshow li.show {
	z-index:500;	
}

ul img {
	border:none;	
}

#slideshow-caption {
	width:450px;
	height:70px;
	position:absolute;
	bottom:0;
	left:0;	
	color:#fff;
	background:#000;
	z-index:500;
}

#slideshow-caption .slideshow-caption-container {
	padding:5px 10px;	
	z-index:1000;	
}

#slideshow-caption h3 {
	margin:0;
	padding:0;	
	font-size:14px;
}

#slideshow-caption p {
	margin:5px 0 0 0;
	padding:0;
}

3. Javascript

We will going to use call back function to display caption. This will solve the "Caption Is Appearing Before The Next Slide Syndrome" :). Not too much of changes in javascript but I do added a feature though. On mouse over the slide will pause, and resume it back on mouse out. I think it's a good touch.

$(document).ready(function() {		
	
	//Execute the slideShow, set 4 seconds for each images
	slideShow(2000);

});

function slideShow(speed) {


	//append a LI item to the UL list for displaying caption
	$('ul.slideshow').append('
  •  
'); //Set the opacity of all images to 0 $('ul.slideshow li').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('ul.slideshow li:first').css({opacity: 1.0}).addClass('show'); //Get the caption of the first image from REL attribute and display it $('#slideshow-caption h3').html($('ul.slideshow li.show').find('img').attr('title')); $('#slideshow-caption p').html($('ul.slideshow li.show').find('img').attr('alt')); //Display the caption $('#slideshow-caption').css({opacity: 0.7, bottom:0}); //Call the gallery function to run the slideshow var timer = setInterval('gallery()',speed); //pause the slideshow on mouse over $('ul.slideshow').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); } ); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); //trying to avoid speed issue if(current.queue('fx').length == 0) { //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); //Get next image caption var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); //Hide the caption first, and then set and display the caption $('#slideshow-caption').slideToggle(300, function () { $('#slideshow-caption h3').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').slideToggle(500); }); //Hide the current image current.animate({opacity: 0.0}, 1000).removeClass('show'); } }

Updates

2010-09-10: Thanks to Rezzie who nailed the IE8 issue! :)

Updated the article and scripts, the link issue is fixed. :) Sorry for the delay.

Speed Issue

This is one of the issue that has been haunted me for a while, but thanks to Sam, one of our reader, he pointed out this would solve the issue, but with mixed result in IE.

Sam's solution, you need to add this:

$(window).focus(function () {
	timer = setInterval('gallery()', speed); 
});
$(window).blur(function () {
	clearInterval(timer);
});

James Burnett's solution, you modify the gallery function():

function gallery() {
	var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

	if(current.queue('fx').length == 0) {
		
		// grab next image and animate code in here
		......
		......
		......
		
	}
}

Also, did some research, found the reason why it's doing it: From jQuery Animate Documentation: Because of the nature of requestAnimationFrame(), you should never queue animations using a setInterval or setTimeout loop. In order to preserve CPU resources, browsers that support requestAnimationFrame will not update animations when the window/tab is not displayed. If you continue to queue animations via setInterval or setTimeout while animation is paused, all of the queued animations will begin playing when the window/tab regains focus. To avoid this potential problem, use the callback of your last animation in the loop, or append a function to the elements .queue() to set the timeout to start the next animation.

Sorry guys, I don't have time to put all these together. Please let me know it works.

Randomize Slides

Simple yet effective solution from another reader - Blastos

Before the ending of function slideShow(), put this in:

//Generate a random number
var randNum = Math.floor(Math.random() * $('ul.slideshow li').length);

//Randomly pick up a slide
$('ul.slideshow li:eq('+randNum+')').addClass('show');

Caption doesn't appear for the first slide

I think it has to be the ommitted A tag for some users. Ammended the script, it should be fixed now.

Conclusion

I have made a lot of tutorials, and I think it's good to do a revisit to make it more efficient and solve some of the annoying bugs instead of quick fixes. So, yea, from now on, I will check my previous tutorials and rewrite them. :)

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, bookmark it and help me to spread this tutorial to our friends! :) Thanks!

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

485 comments

carlos gonçalves
Mon, 19th December 2011
In your demo the same error occurs Reply
clydde
Tue, 20th December 2011
Randomize function no work.
Tested in IE 8 Chrome 16 and FF 8 Reply
clydde
Tue, 20th December 2011
ahhh, the Randomize work but it is necessary to remove the reference to the class of the first frame of Slide:

No Randomize <li class="show">

With randomize activated. <li> Reply
clydde
Wed, 21st December 2011
I modified the code a bit to Randomize mode, if anyone is interested here it is the example:

Download http://www.megaupload.com/?d=DV9Z0FV9

regards Reply
Kevin Liew Admin
Wed, 4th January 2012
Thanks clydde! Reply
Ryan
Wed, 4th January 2012
Can I change the color of the caption? Its showing up gray, and hard to read. Reply
Ryan
Wed, 4th January 2012
Nevermind, found out how to change the color... But how can I link the ALT text? Reply
Akhil Mahajan
Fri, 13th January 2012
Hello.. and thanks for such a nice script. basically i want the slideshow to appear in the middle and below the menu tab which i have created for my website. any help would be great. Thanks again. Reply
Ryan
Mon, 16th January 2012
First of all, very neat script !
I just have one question. Is there a way to fire some events with buttons like "next" , "previous" or maybe like "show(3)" for 3rd item ?

With such an addition the visitor will have the ability to scroll in between the images too.
Would be so cool.
Tx Reply
Kevin Liew Admin
Thu, 19th January 2012
Hi Ryan, sorry it doesn't have that feature in this tutorial. But I can recommend you using nivoslider. Reply
Amir
Thu, 19th January 2012
How would you go about adding an image to the sliding caption? Reply
Ayman
Thu, 9th February 2012
Good work but I have a big problem, I have a menu thats show a drop child when the mouse go over it, the slider is shown above the menu child, how can I fix it? please help Reply
Kevin Liew Admin
Thu, 9th February 2012
It's the z-index issue. You can set the menu child's z-index higher than this slideshow, or lower the value of this:

ul.slideshow li.show {
z-index:500;
} Reply
Ashley
Mon, 20th February 2012
What am I doing thjs wrong? I see the first image, but then there is a black box above it on the page that appeared when I put in the js code. and nothing is working. help! :) Reply
Ashley
Mon, 20th February 2012
Actually ignore my first comment because I figured it out, but now I am wondering how you can take out the hover over pause, and also make it go through slower. Thanks! Reply
Kevin Liew Admin
Mon, 20th February 2012
Hi Ashley,

Referring to the Javascript section above, remove line 30 - 38. That's the hover event.

To make it goes slower, in line 4, increase the integer value. It's in millisecond. Reply
Phil
Thu, 23rd February 2012
Is there anyway to link the alt text to another webpage? Reply
Kevin Liew Admin
Tue, 6th March 2012
You can, but it won't look pretty. You actually can put HTML code in the ALT tag, but becareful with the quotes and double quotes. Reply
Lou
Wed, 29th February 2012
Thank you for this script. A part of it is exactly what I've been looking for...the sliding-up Caption over the image.

I already have a gallery set with JQuery. Clicking a tumbnail brings the big image as an overlay.

Can I apply the part of the CAPTION sliding-up over the big image when it's called? All I found so far is captions with mouseover. (website to be compatible for iPads...no mouse)

If so, I'd be thankfull for any information on how to do it.
Thank you. Reply
robert
Sun, 4th March 2012
Agree with all - very nice script. Could you tell me how to change the Javascript to make the slideshow play through just ONCE and then NOT return to the first image, please? The idea being that I want an image that will reveal itself in stages, but once complete, would remain on the page in full. Best wishes. Reply
Kevin Liew Admin
Tue, 6th March 2012
http://www.queness.com/resources/html/slideshow2/no-return.html

Basically I made timer variable as global, and clear it once it reached the last slide in gallery function. Reply
Brandon
Mon, 5th March 2012
I followed the instructions, but the slider isn't cycling through the images. Website is www.lostinidaho.me. Are there any steps I may have missed? Reply
Joe
Tue, 6th March 2012
hi, awesome tutorial,



im having one issue, when i put it on my site it has made my lightbox not work, when you click on the image it just shows the image in another window instead of using the lightbox effect. Im not to sure why its doing this.

any help would be good.

thanks Joe

Reply
Kevin Liew Admin
Tue, 6th March 2012
Is your lightbox uses jQuery framework? Any console error? Reply
Joe
Tue, 6th March 2012
yeah it is using js, no errors have came up that i have seen Reply
Kevin Liew Admin
Tue, 6th March 2012
It's hard to see the issue. Do you have it online? Reply
Jow
Sat, 10th March 2012
i dont actually, as it is still in development, is there some way i could send you the files, or i could work out a way to host the files then ill send you the link for you to download Reply
Rob
Thu, 15th March 2012
I'm betting the function names are colliding with a function name in your lightbox. Probably gallery. try renaming the functions in the slideshow code and everywhere they are referenced. Reply
Natspace
Sun, 11th March 2012
How would I make it stop after the last slide? Is it possible or not?
Thanx in advice! Reply
Elisa
Tue, 13th March 2012
Sorry if somebody else asked the same question before.
Installed this slider. Everything works nicely, but now 'they' want a manual function to scroll through the slides as well as the automatic function
Is there a way to add previous and next button for manual option to this slider or do I have to install a different one?
Thanks so much! Reply
Joshua Bambrick
Sat, 17th March 2012
My own take on the slideshow:
http://dl.dropbox.com/u/7803192/Sullivan/Further%20Resources/slideshow.html

Has buttons to move to next or previous and circles at the top allow you to jump to a specific slide (and indicate the current slide). Reply
ahmed
Sat, 24th March 2012
Very Very Very Thanks......................................... Reply
CHSAdmin
Fri, 11th May 2012
Joshua,

Tried your take on the slider and have a few issues. 1) slideshowBox has more dots than there are slides? 2) prev arrow does not work on first slide? 3) i have four slides in the script but only three are appearing?

I have your version of the slideshow embedded on the News & Media page (for testing) at chscottenterprises.com.

Any help would be appreciated. Reply
Robert
Wed, 21st March 2012
Hi, excellent tutorials. I've tried even the first slider tutorial, and now this one. However, what I want it to really do is to auto-resize to fit any display it is on, iPhone, iPad or Laptop, or full PC.
I can not find a way to make both the images and caption resize.
Thanks Reply
Sujay
Sun, 25th March 2012
Hi ,

I tried to run this slide show from database while I replaced the "first" to "last" and "next" to "Prev". All sildes worked but captions do not display. Can anybody help me with running the same above slide show from last to first please? Reply
Nick W
Mon, 26th March 2012
Can anyone give guidance on adding a second caption please? I tried adding js code and css for "slideshow-caption2" but not made it work yet. Reply
Chris
Fri, 30th March 2012
Hi Kevin, absolutely fantastic script that's worked a treat for the site I'm working on. However, instead of the slide toggle, is there a way to fade in the captions instead? That's what I'm really after. I'm awful with Jquery so I've no idea where to start unfortunately. Reply
Brian Bauman
Sun, 1st April 2012
Using it on my site, I couldn't get the time issue to fix, so I changed a few lines. Line 49 I changed current.queue to $('ul.slideshow li').queue since it wasn't sure what current was, then I made the variables speed and timer global since its a small deployment.

Also had it clear and reset the Interval at the end of the gallery() function. Those fixes made it work perfectly for me.

You can see it under the about tab here:

http;//www.mappedgraphics.com/ Reply
subhojit777
Sun, 29th April 2012
Thank you Thank you Thank you so much Reply
Blue C
Sun, 29th April 2012
if(current.queue('fx').length == 0), I don't understand this sentence, please show me..... Reply
Erica
Fri, 11th May 2012
Great!
it is really what i was looking for! thank you!!

only a question: how to block the caption? I mean not to have the gray sliding up and down every slice...
if can, that will be perfect!
thanks again, great job Reply
Erica
Sun, 13th May 2012
Hi Kevin,yesterday I've posted a question.
Forget about it, the script works great and in the comments there are all the instruction to do almost everything!
Yesterday I just not saw the 'more comment' link, so i didn't saw the questions already solved before.
Thanks again, grab job! Reply
Nick
Thu, 17th May 2012
Any ideas on the best way to set different coloured text for different slide captions? Reply
Jesse
Sat, 2nd June 2012
How can I put multiple slideshows on one page. Would like to have 4 slideshows with different images all working at the same time. Yes its madness, but they want it :-( Reply
Devon
Sat, 2nd June 2012
I LOVE THIS SLIDER! I have used it for a few websites but now I am trying it on a new website minus the captions - however 1 major problem - the pictures aren't coming up 1 behind the other, when I remove the css I can see the slideshow perfectly but the pictures are in a vertical format instead of transitioning 1 behind the other. PLEASE HELP! Thanks in advance! Reply
John
Sat, 2nd June 2012
I am not getting the slides show instead, i am seeing three different images at once why is this the case Reply
CHSAdmin
Mon, 4th June 2012
Well done! Read many of the comments and was able to create a version that Google Sites Users can embed by using the Google Gadget Editor.

Added click-through on the image "title" and included navigation within the slide indicator that "Joshua" offered up in his demo.

I have it running on our labs page: http://www.chscottenterprises.com/home/test

Thanks, great tutorial! Reply
Sergio
Tue, 12th June 2012
Hi.
I have one question: I want to place a image over the slideshow, to act like a frame. How can I do it? I suspect it is only with HTML and CSS, rather than messing with the script, but I have no idea how to do it.
Can anyone help?

By the way, this is a great script. Kudos to the author! =D Reply
Sergio
Tue, 12th June 2012
Hi,
I send a question earlier about overlaying a frame in this slideshow, but I found the answer. I was misplacing the div. Now everything works fine!
Congratulations again on your script! Reply
cap6
Tue, 26th June 2012
hi-thanks for the slider-works brilliant!
However, Im trying to make the 'show' - stay static for two images in a row & again make it slide for the one after that.
As the caption is one & the same & think would be better to have it stopped (not animating-but show)
could you help with nay ideas how to tweak the jquery?
much appreciated
thank you Reply
Scott
Wed, 27th June 2012
Any chance of getting next/prev buttons added? Great slide by the way... Reply
Stacie
Wed, 19th September 2012
Same question! Pagination buttons would be even better! Reply
bitra
Sat, 23rd March 2013
Agree. Pagination buttons would be awesome. Reply
DefileMeElmo
Tue, 17th July 2012
This is a GREAT simple slideshow. Probably one of the best I've seen that doesn't require JQuery Cycle. My only question is how to create a navigation menu that brings up the slides when a user clicks on it (which would also reset setInterval)? Reply
Martin
Thu, 19th July 2012
fantastic slider!
unfortunately results a W3C validation error..
Line 286, Column 70: document type does not allow element "li" here..
http://www.comune.miasino.no.it/3_0/page20/page20_1.html Reply
Kevin Liew Admin
Thu, 19th July 2012
If you create a file and link the javascript externally it will be fine. Or wrap your javascript with CDATA.
Reply
ELowe
Thu, 2nd August 2012
Great slideshow. I was able to integrate this into my custom Thesis theme without any issues whatsoever. Thanks!!! Reply
Ivan
Wed, 8th August 2012
Great tutorial, I dont know much abt JQuery and I know there are 2 options here to slow down the slide but I dont know where to place the code solutions provided by "Sam" and "James Burnett's"

Can anyone help with a step by step in order to slow down the speed on the slide?? Reply
Thilanka
Fri, 10th August 2012
plz plz create this as the image caption pop up on the mouse over

Thank you. Reply
david
Mon, 13th August 2012
I'm a complete notice at this. To add this carousel functionality, would I copy the contents of the 'jquery-slideshow.html and add it to the default.aspx file ?

Thanks

David Reply
amanda
Tue, 16th October 2012
This is working fantastically but I am hoping to expand it a bit. I am trying to use this universally in a CMS that a client will want to edit, and some pages only have one image. Currently this behaves a bit oddly (see example here: http://wyrmwyrx.com/te-moore/paintings/cloister-san-marcos/).

Can you recommend a way to edit the plugin so that if there is only one image, it will remain static? or some solution that would give the appearance of it being static?

Thanks!
Reply
Nick
Mon, 12th November 2012
How can we add responsiveness like the slideshow at http://responsive-slides.viljamis.com/ ? Reply
martvin
Sat, 8th December 2012
in randomize:
var randNum = Math.floor(Math.random() * $('ul.slideshow li').length);

I use :
$('ul.slideshow img').length
because "ul.slideshow li" count "li.caption" too and array is always one element longer than necessary
Reply
edo
Sun, 31st March 2013
Can you please fix the js code in the article? thank you. Reply
Inder
Thu, 11th April 2013
Thank You soooooooo much for such beautiful tool .. .You saved my lot of time ...
Reply
Wayne
Sat, 20th April 2013
Finally, a slideshow that meets my needs: captioning where I can control the height of the captions; the display of images of different sizes; and the ability to have the images centered within the display frame. Thank you! If there are copyright issues in using the code, please let me know. Reply
Anjum
Tue, 30th July 2013
Thanx!
worked like a charm Reply
c
Thu, 9th January 2014
The JS code element is somewhat broken... Reply
steve
Tue, 8th July 2014
Works Great, Thanks!!! 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