Call Now 407.243.8420

jQuery iTunes-like Content Slider

Update: Also check out the updated version of this script: Clickable jQuery iTunes-like Content Slider w/ Looping.

NetTuts has a great iTunes-like Content Slider tutorial that explains how to make a content slider in jQuery.

We’ve made a few modifications to their example:

  • Thumbnails are made by showing a smaller version of the same image using CSS, so an additional thumbnail graphic does not need to be created and so the user only has to load the graphic once.
  • Rounded corners were added using a PNG graphic overlay on top of the content slider.
  • We made a second version of the jQuery code to reverse the order of the content in the slider.

First we added the rounded corners and left the order in which it displays the content alone:
View The Demo

Then we created another version with the order in which it displays the content reversed:
View The Demo

Both examples use the following HTML markup & CSS:

<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">
	<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>
#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 upwards moving thumbnails example uses the following jQuery script:

$(document).ready(function() {
	var index = 0;
	var images = $("#gallery img");
	var thumbs = $("#thumbs img");
	var thumbsHeight = 100;
	thumbs.slice(0,3).clone().appendTo("#thumbs");
	for (i=0; i
&lt;(thumbs.length-1)){index+=1 ; }
		else {index=0}
		show (index);
	}
	function show(num) {
		images.fadeOut(400);
		$(".image-"+num).stop().fadeIn(400);
		var scrollPos = (num+1)*thumbsHeight;
		$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);
	}
});

The downwards moving thumbnails example uses the following jQuery script:

$(document).ready(function() {
	var images = $("#gallery img");
	var thumbs = $("#thumbs img");
	var index = thumbs.length-1;
	var thumbsHeight = 100;
	thumbs.slice(thumbs.length-3,thumbs.length).clone().prependTo("#thumbs");
	for (i=0; i
&lt; thumbs.length &amp;&amp; index &gt; 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);
	}
});

This entry was posted on Wednesday, June 23rd, 2010 at 11:00 am and is filed under jQuery Tutorials, Tutorials, Web Design Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

9 Responses to “jQuery iTunes-like Content Slider”

  1. Morgan says:
    July 5, 2010 at 11:23 pm

    Legend!

    Reply
  2. Batsirai says:
    July 20, 2010 at 3:41 am

    How would we make the thumbnails become navigation for the content… click on thumb#2 and image #2 shows…

    Reply
  3. WebSight Designs says:
    July 23, 2010 at 11:47 pm

    Hi Batsirai,

    Getting this to work required a lot of changes to the script, so we’ll post a new tutorial for it as soon we can!

    Thanks for reading,
    WebSIght Designs

    Reply
  4. jQuery iTunes-like Content Slider Revisited – WebSight Designs says:
    July 26, 2010 at 11:58 am

    [...] our previous tutorial, we showed you how to create an iTunes-like content slider. Today we will show you how to modify [...]

    Reply
    • sunil says:
      June 22, 2011 at 6:03 am

      Hi,
      I want to move image continuous , now its reloaded after one rotation ,Please give your suggestion

      Thanks
      Sunil

      Reply
  5. jQuery iTunes-like Content Slider w/ Looping says:
    July 24, 2011 at 12:03 pm

    [...] our previous tutorials we showed you how to create a content slider similar to the one found in the iTunes [...]

    Reply
  6. WordPress Tutorials says:
    January 3, 2012 at 9:54 pm

    WordPress Tutorials…

    [...]jQuery iTunes-like Content Slider | WebSight Designs[...]…

    Reply

Leave A Comment