In our previous tutorials we showed you how to create a content slider similar to the one found in the iTunes program. Some readers requested the content slider loop continuously instead of rewinding back to the first thumbnail. We have modified the content slider to add this new feature.
We start with the following HTML markup:
<div id="gallery"> <img src="images/slider/1.jpg" alt="" /> <img src="images/slider/2.jpg" alt="" /> <img src="images/slider/3.jpg" alt="" /> <img src="images/slider/4.jpg" alt="" /> <img src="images/slider/5.jpg" alt="" /> <img src="images/slider/6.jpg" alt="" /> </div> <div id="thumbs"> <ul> <li><a href="#" onclick="return false;" class="5" class="thumblink"><img src="images/slider/1.jpg" alt="" /></a></li> <li><a href="#" onclick="return false;" class="4" class="thumblink"><img src="images/slider/2.jpg" alt="" /></a></li> <li><a href="#" onclick="return false;" class="3" class="thumblink"><img src="images/slider/3.jpg" alt="" /></a></li> <li><a href="#" onclick="return false;" class="2" class="thumblink"><img src="images/slider/4.jpg" alt="" /></a></li> <li><a href="#" onclick="return false;" class="1" class="thumblink"><img src="images/slider/5.jpg" alt="" /></a></li> <li><a href="#" onclick="return false;" class="0" class="thumblink"><img src="images/slider/6.jpg" alt="" /></a></li> </ul> </div>
And here’s the CSS:
#gallery, #thumbs { float: left; } #gallery { width: 600px; height: 300px; overflow: hidden; z-index: 2000; border: hidden; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-bottomleft: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } #gallery img { position: absolute; width: 600px; height: 300px; display: block; overflow: hidden; z-index: 0; border-top: 1px solid #999; border-left: 1px solid #999; border-bottom: 1px solid #999; border-right: none; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-bottomleft: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } #thumbs { height: 300px; margin: 0; padding: 0; overflow: hidden; border-right: 1px solid #999; border-bottom: 1px solid #999; border-top: none; border-left: none; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; } #thumbs ul { margin:0; padding:0; list-style:none; } #thumbs li { float: left; clear: both; width: 200px !important; height: 100px !important; margin: 0; padding: 0; border: 0; overflow: hidden; } #thumbs img { width: 200px !important; height: 100px !important; margin: 0; padding: 0; border: 0; overflow: hidden; z-index: 0; } .clear { clear: both; } img { border: 0; }
And finally, the jQuery script:
// document ready $(document).ready(function() { // user settings siftSpeed = 3800; // how often to switch slides actionPause = 8800; // how long to pause if action // internal script settings // (do not change below here unless you know what you're doing) var images = $("#gallery img"); var thumbs = $("#thumbs"); var thumbimages = $("#thumbs img"); var thumblinks = $("#thumbs a"); var thumbslist = $("#thumbs ul"); var thumbitems = $("#thumbs li"); var index = thumbitems.length-1; var thumbsHeight = 100; var areaHeight = 300; // clone markup for thumbs to create thumbs above the last thumb thumbitems.slice(0, 1).clone().attr('rel', '2').appendTo(thumbslist); thumbitems.slice(1, 2).clone().attr('rel', '2').appendTo(thumbslist); thumbitems.slice(2, 3).clone().attr('rel', '2').appendTo(thumbslist); // assign css classes to images and thumbs for (i=0; i<thumbimages.length; i++) { var tdiff = (images.length - i - 1); //$(thumbimages[i]).addClass("thumb-"+tdiff); $(images[i]).addClass("image-"+tdiff); } // reverse the order of the thumbs thumbslist.children().each(function(i,li){thumbslist.prepend(li)}); // run the show function to show the first image show(index); // run the sift function every so often var $timer = setInterval(function() { sift(); }, siftSpeed); function sift(num) { if(num) { index = num; } if ( index < thumbimages.length && index > 0) {index -= 1 ; } else { index = thumbimages.length-1 } show ( index ); } function show(num) { images.fadeOut(200); $("img.image-"+num).stop().fadeIn(200); var scrollPos = (num * thumbsHeight) - areaHeight; if(scrollPos < 400) scrollPos = scrollPos + areaHeight; if (num == thumbitems.length-1 || num > thumbitems.length-4) { thumbs.stop().animate({scrollTop: scrollPos+thumbsHeight}, -1).animate({scrollTop: scrollPos}, 200); // console.log("number: "+num, ", scrollPos: "+scrollPos+"+"+thumbsHeight, ", duration: -1"); } else { thumbs.stop().animate({scrollTop: scrollPos}, 200); } // console.log("number: "+num, ", scrollPos: "+scrollPos, ", duration: 200"); } // after the actionPause takes place start the timer again function resetTimer() { clearInterval($timer); $timer = setInterval(function() { sift(); }, siftSpeed); } // add onclick function to thumb links thumbslist.find('a').each(function(){ $(this).click(function() { var showid = $(this).attr("class"); // console.log("showid: "+showid, ", timer: "+$timer); show(showid); index = showid; clearInterval($timer); var $timer = setTimeout(resetTimer, actionPause); return false; }); }); });
