Update: Also check out the updated version of this script: Clickable jQuery iTunes-like Content Slider w/ Looping.
In our previous tutorial, we showed you how to create an iTunes-like content slider. Today we will show you how to modify the content slider so clicking on one of the thumbnails loads the image in the main area.
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"> <a id="1" class="thumblink" onclick="return false;" href="#"><img src="images/slider/1.jpg" alt="" /></a> <a id="2" class="thumblink" onclick="return false;" href="#"><img src="images/slider/2.jpg" alt="" /></a> <a id="3" class="thumblink" onclick="return false;" href="#"><img src="images/slider/3.jpg" alt="" /></a> <a id="4" class="thumblink" onclick="return false;" href="#"><img src="images/slider/4.jpg" alt="" /></a> <a id="5" class="thumblink" onclick="return false;" href="#"><img src="images/slider/5.jpg" alt="" /></a> <a id="6" class="thumblink" onclick="return false;" href="#"><img src="images/slider/6.jpg" alt="" /></a> </div>
And here’s the CSS styles:
#gallery, #thumbs { float: left; } #gallery-overlay { background: transparent url('../images/home-slider-overlay.png'); position: absolute; display: block; width: 800px; height: 300px; z-index: 200; } #gallery { width: 600px; height: 300px; overflow: hidden; } #gallery img { position: absolute; display: block; } #thumbs { width: 200px; height: 300px; overflow: hidden; } #thumbs img { width: 200px; height: 100px; } .clear { clear: both; }
The jQuery script:
$(document).ready(function() { $("a#1").click(function() { show(0); return false; }); $("a#2").click(function() { show(1); return false; }); $("a#3").click(function() { show(2); return false; }); $("a#4").click(function() { show(3); return false; }); $("a#5").click(function() { show(4); return false; }); $("a#6").click(function() { show(5); return false; }); var images = $("#gallery img"); var thumbs = $("#thumbs img"); var thumblinks = $("#thumbs a"); var index = thumbs.length-1; var thumbsHeight = 100; thumblinks.slice(thumblinks.length-3,thumblinks.length).clone().attr('id', function() { var id = $(this).id; return 'b' + this.id}).prependTo("#thumbs"); $("a#b4").click(function() { show(3); return false; }); $("a#b5").click(function() { show(4); return false; }); $("a#b6").click(function() { show(5); return false; }); for (i=0; i 0) {index -= 1 ; } else { index = thumbs.length-1 } show ( index ); } function show(num) { images.fadeOut(400); $(".image-"+num).stop().fadeIn(400); var scrollPos = ( (num-1) * thumbsHeight ) + 100; $("#thumbs").stop().animate({scrollTop: scrollPos}, 400); } });
[...] Also check out the Clickable jQuery iTunes-like Content Slider. Share With Your [...]
I must be missing something. I have tried every version of this tutorial that I can find on the nets, but I just can’t get it to work.
I can get the images to load both in the gallery div and the thumbs div, but I can not get the thing to scroll or (in this tuts case) make them clickable. I’ve got a test site up, can someone check it and see what i’m not?
http://drewfranz.com/slider.html
Thanks.
It appears you haven’t copied the tutorial’s example code verbatim, specifically you’ve added another JavaScript library or script which may be interfering. If it works for you when copying the code exactly and entirely, then the problem is somewhere else in the additions you’ve made. We hope this helps you, Drew. Thanks for reading!
[...] Tags: continuity, question I'm working on an iTunes-like jQuery scroll based on this script. [...]
Thanks a lot for the wonderfull script.
Cheers~~!!
Any time, Jamie. We’re glad you found it helpful.
Thank you. The tutorial was really helpful. One thing I needed help with is a “previous” button. It didn’t work properly on my attempt. I was wondering if anyone has any solutions to it.
Your example is exactly what I am looking for. However, I am very new to html and jquery and have no idea where to paste your jquery script? Do I include it in the html markup? I tried pasting the html after my and then pasting the jquery right after, but I have had no avail. I am trying this on both Weebly and Yola website builders. Weebly allows me to customize the whole HTML and CSS while Yola only does HTML Widgets. Any way I can get this awesome script to work on these website builders? if not, what do you recommend?
Jed, you may try clicking the “View The Demo” link and then viewing the source in your browser to get a better idea of where the code snippets should be placed. We write all of our code from scratch, so I’m not familiar with any website builders. I’d recommend you seek support from any channels made available by the website builders you are using.
Awesome tutorial! Any way to make it loop seamlessly? Or to incorporate easing?
Really wonderful article.
I am looking for the similar thing but with continuous images rotation. Any help in this regard would be highly appreciable.
Thanks in advance.
Thanks,
Krishan
Some of your example code on this page isn’t displaying correctly in my browser, so I’m unable to copy it. Do you happen to have a ZIP file with demo files?
Hi jlord, thanks for pointing this out to us. Apparently there was an issue with the wp-syntax plugin after a recent WordPress version upgrade that needed looked at. We’ve taken care of correcting this issue so the code will appear again. You can also just view the demo and “View Source” in your browser to see/copy the markup.
[...] our previous tutorials we showed you how to create a content slider similar to the one found in the iTunes program. Some [...]