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 CaptionIt'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 data-src="images/s1.gif" width="450" height="200" title="Slide 1" alt="Short Description"/></a></li> <li><a href="#"><img data-src="images/s2.gif" width="450" height="200" title="Slide 2" alt="Short Description"/></a></li> <li><a href="#"><img data-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('
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!
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.Im still have problems with IE8 though despite trying the fixes mentioned in the comments.
If I add any padding or margins to the slideshow-caption-container, the slideshow-caption h3 or p it breaks and only displays the first images caption for all images....
Can you help as Id really like to use this in my site.
Many thanks
Thanks again for a terrific but of software. But I am afraid I have found another IE issue. It works perfectly in IE6 and IE7 and Firefox. But in IE8 the caption does not change with the image. However if you click anywhere on the in the browser window the caption instantly corrects itself. Or if you hover over the slider, again the caption corrects itself.
But otherwise it displays the same caption everytime.
You can see it live here: http://www.impowersites.com
Thanks!
doesn't do anything for this issue
When I remove it entirely it makes no difference, the bug with the captions still appears.
This problem seems to only affect IE8 although I haven't tested Safari or Google chrome.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> does indeed work.
Sorry. Too many hours in front of the computer. Editing the local file while looking at the remote site.
Time to take a break!
I have the slide delay set to 6000.
You can check the problem at http://games.sector3.com.au/
It normally gets cleared with a page refresh, but usually happens when the page is loaded from a link on another page.
This issue doesn't seem to happen in Firefox, Chrome or IE7/8
To fix it I think you can change this:
//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'));
to this:
//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow li:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow li:first').find('img').attr('alt'));
Thanks
Jim
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
force IE8 to render the page using IE7 engine... i hope it works.... bloody IE... :)