Register now or login here to start promoting your blog and your favourite articles.
jQuery Photo Slide Show with Slick Caption Tutorial Revisited
16 Dec 2009 - 66 Comments
A revisit from my previous famous Image slide show with semi-transparent caption jQuery tutorial. I have fixed bugs and enhanced this image slide show to be more efficient, w3c compliant and more semantic. Quick! Learn how to create a slide show with cool sliding caption effect using jQuery.
Author: kevin | Source: queness
Demonstration Download

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.

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}); //Get the caption of the first image from REL attribute and display it $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title')); $('#slideshow-caption p').html($('ul.slideshow a:first').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')); //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').animate({bottom:-70}, 300, function () { //Display the content $('#slideshow-caption h3').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').animate({bottom:0}, 500); }); //Hide the current image current.animate({opacity: 0.0}, 1000).removeClass('show'); }

    Updates

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

    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!

    Demonstration Download

    Copyright & Usage

    The effects and techniques demonstrated in tutorials on Queness can be used in whatever manner you wish without attribution. You cannot copy whole tutorials (unless permission is given), either in English or translated to another language.

    Share This Post to Support Me! :)


    Comments

    D-Hero on 11 Mar 2010 says:
    I am experiencing the same problem as Darius. You can try to open the demo in IE8 and see that the first slide caption shows up on all slides. It's the caption belonging to the short description that doesn't change. The caption text on the image itself works fine.
    the site company on 10 Mar 2010 says:
    perfect! i only just found this new version after i had already setup the old one... oh well
    giobi on 7 Mar 2010 says:
    thanks, really really great tutorial - you can see the result on www.eugad.eu
    Aaron on 2 Mar 2010 says:
    I am putting a simple slideshow using this script, only four images, and in FF it changes perfectly with the captions working the way they are. In IE however, only the first picture shows up, and the rest dont. In IE however, it does rotate back to the first pic, so it seems like its rotating in an invisible way. Is there a fix for this in IE 7/8?
    Darius on 1 Mar 2010 says:
    Tried <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> but the first slide caption keeps coming up all of the time in IE8. Anyone find a work around yet?
    Darius on 1 Mar 2010 says:
    never mind, my mistake in CSS.
    Darius on 1 Mar 2010 says:
    Everything works great except the caption black background is not working for me. Anyone have any ideas?
    kastor on 23 Feb 2010 says:
    Hi, first of all, thanks for a great script.

    I have a small problem though. I made a gallery of around 20 jpg pictures 940x250px each and the animation got very "laggish". I found that removing "width" and "height "parameters from "li" improved the performance a little bit but still the more pictures i load the slower the animation gets. Do you know any way to improve the animation performance? Thanks in advance.
    Nick D on 20 Feb 2010 says:
    How would i go about adding this to an exisiting Html page. What is the script I would use to point to the gallery?

    Example I want to replace my Flash Image at the top of my site www.workincomics.com with your script.
    camy on 19 Feb 2010 says:
    caption 1 is stuck on alt 1
    (all slides have the same caption and title)

    Leave a comment

    Subscribe RSS Subscribe RSS, Keep yourself updated with queness latest posts!
    Pixel Crayons Increase your traffic!

    Buy wholesale computers directly from China at DHgate.com

    Discover the tools to build your e-Commerce Site with Netfirms

    •  
    •  
    •  
    •  
    •  

    Community News

    Random Posts



    Digging in Wordpress
    View all posts and news Back to top

    About the Author

    A web designer and developer who is passionate and keen on contributing to the web development industry. Feel free to say hi to me, or follow me on twitter.

    Kevin Liew

    Partner

    • Web and Designers
    • CSS Style
    • PV.M Garage Blogzine - (Italian)
    • TutsValley
    • Designrfix
    • CoolVibe
    • Web Developer Juice
    • Denbagus
    • Web Hosting Secret Revealed
    • PSD to HTML Conversion
    • BlueHost