Post image for Create an Apple Itunes-like banner rotator/slideshow with jQuery

Create an Apple Itunes-like banner rotator/slideshow with jQuery

by Hyder on August 11, 2011

in Jquery

Apple has always been a god in the way they present their products on its website.There’s always something to admire about them .This article explains how to clone the slider in Itunes web store using jQuery.

It is sometimes also called banner slideshow,banner rotator or simply image slideshow, which is a modern way of displaying your featured content or image gallery, especially when you have a limited of space on your website. If you have never seen or have no idea what I’m talking about,may be the image below will refresh your memory.

Html markup

Below is the html skeleton of our banner. The large and the small images is placed is a separate div. For the large image, let’s call it block A and for the small images, Block B.

<div id="block-itunes">
		<div id="blockA"><!-- Block A for large image-->
       <a href="#largeimage">
       <!-- large Image is added here -->
       </a>
        </div>
		<div id="itune_images">
			<div id="blockB"> <!-- Block B for small Images-->
		<a href="#image1">
		<img src="banners/harrypotter_small.jpg" alt="" class="min"  />
		</a>
		<a href="#image2">
	       <img src="banners/prisonbreak_small.jpg" alt="" class="min"  />
		</a>
		<a href="#image3">
		<img src="banners/transformers_small.jpg" alt="" class="min" />
		</a>
		<a href="#image4">
	      <img src="banners/xmenfirstclass_small.jpg" alt="" class="min"  />
	        </a>
	     </div>
	</div>
		<button type="button" id="bi-button"></button>
	</div>

CSS Part

The CSS below  is pretty self explanatory .

.title {/*The small copyright text just below the banner*/
	width: 750px;
	margin: 0 auto;
	padding: 10px;
	font-size: 10px;
	color: #333;
}
#block-itunes {/*The mail div holding block A & B*/
	position: relative;
	width: 771px;
	height: 219px;
	background: #fff;
	margin: 0 auto;
}
#block-itunes img {/*Style for our image */
	display: block;
	border: 0 none;
}
#itune_images {
	position: absolute;
	right: 0;
	top: 0;
	width: 220px;
	height: 219px;
	overflow: hidden;
}
#blockB {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 220px;
}
#blockB a {
	position: relative;
	display: block;
	width: 220px;
	height: 73px;
}
#blockB a .min {
	width: 220px;
	height: 73px;
}
#blockB a .max {
	display: none;
	width: 550px;
	height: 219px;
}
#blockA {
	position: relative;
	width: 550px;
	height: 219px;
}
#blockA a {
	position: absolute;
	left: 0;
	top: 0;
	width: 550px;
	height: 219px;
}
#blockA a .min {
	display: none;
}
#blockA a .max {
	width: 550px;
	height: 219px;
}

#block-itunes {/*some css3 styles*/
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	overflow: hidden;
	-webkit-box-shadow: 0px 2px 5px #888;
	-moz-box-shadow: 0px 2px 5px #888;
	box-shadow: 0px 2px 5px #888;
}

How Block B works

Block B contains a set of small images that rotates vertically at the right. As you can see from the html code above,the images are placed within the div BlockB.To make the image rotate,each time the last image is repositioned at the top within the div BlockB by manipulating the dom using jQuery.The code below is what makes the image rotation possible.

function nextA() { // function
$('#blockB').css({bottom: 0});
// set style bottom:0px to div with id = blockB
$('#blockB').animate({bottom: -height}, 600);
// make image move 73 px to the bottom with animated effect for 600 ms
$('#blockB a:last-child').prependTo('#blockB');
// take the last image and add  the top in the save div i.e id= blockB
}


The code above will only rotate the image only once.To make it rotate continuously, I used the javascript function SetTimeout to repeatedly call function nextA every 5000ms.

	timeout = setTimeout(function() { // call the function nextA() repeatedly evey 5000 ms
			nextA();
		}, 5000);
	}

At this stage , you should have something like this : Itunes Jquery Banner Snapshot 1

How Block A Works

As I previously said,Block A contains the larger image. Each time the last image in Block B is added at the beginning of itself ,it is also added in Block A as well but with a few difference in the image url.
Consider the Image links in block B as below:

<a href=”#image1″>
<img src=”banners/harrypotter_small.jpg” alt=”" />
</a>
<a href=”#image2″>
<img src=”banners/prisonbreak_small.jpg” alt=”" />
</a>
<a href=”#image3″>
<img src=”banners/transformers_small.jpg” alt=”" />
</a>
<a href=”#image4″>
<img src=”banners/xmenfirstclass_small.jpg” alt=”" />
</a>

If you remove “_small” from the url , it will point to the larger image in our folder.Below is the code how we instruct jQuery to do that on the small images in the DOM .

	$myclone = $('#blockB a:last-child').clone();
	//Let's make a clone of the last image from Block B before removing the '_small'
	var image_manipulation = $myclone.html() ;
// we now have something like this in our variable  : <img src="banners/xmenfirstclass_small.jpg" alt="" class="min"  />
	$big_image  = image_manipulation.replace(/_small/, '');
	// now remove the text "_small"  to make it like  :  <img src="banners/xmenfirstclass.jpg" alt="" class="min"  />
 // we did this because we need to point it to the larger image
	$('#blockA a').html($big_image);
// insert the larger image in our Block A
	$('#blockA img').removeClass("min").addClass("max");
//remove the class 'min' associated with image and insert class max.
//class 'max' contains some styles for our larger image , nothing special :)

Combining all the above code , we should have an almost complete Slider .You can see Itunes Slider Snapshot 2 which contains all the code explained so far .

Adding the Button

By default, all the image rotates after 5000 milliseconds ( five seconds ) but if you want to rotate the image manually, you can click on the “Arrow button”. Below is the code to make the button work in our ITunes slider.

#bi-button {/*some styling for our button*/
	position: absolute;
	right: 89px;
	bottom: 5px;
	width: 42px;
	height: 42px;
	background: url(itunes-button.png) 0% 0% no-repeat;
	border: 0 none;
	cursor: pointer;
}
#bi-button.btn-down {/*Give the impression we are pressing down the button*/
	background-position: 0% 100%;
}

Now we need to add some mouse events to our button so that:

  • When a user hover the cursor on the slideshow , the image button appears.
  • When a user clicks on the button , the slideshow continue to play .

$(‘#block-itunes’)
.mouseenter(function() {//When user hover cursor on banner
$(‘#bi-button’).stop().animate({opacity: 1});//add the “Arrow” button
})
.mouseleave(function() {//When user move cursor away
$(‘#bi-button’).stop().animate({opacity: 0});//Remove the “Arrow” button
});
$(‘#bi-button’)
.css({opacity: 0})
.bind(‘keydown mousedown’, function(){
$(this).addClass(‘btn-down’);//give the impression button is pressing
})
.bind(‘keyup blur mouseup mouseleave’, function(){
$(this).removeClass(‘btn-down’);//give the impression button is being released
})
.click(function() {//When user clicks the “Arrow” button
nextA(); // make the image ‘rotate’ through the list
});

Wrap up

And there we have it: a clone of Itunes Slider using jQuery,I hope the article along with the full code comment it should be clear enough to understand. In case you are stuck, or you got a question,i will be more than happy to help you with my little jQuery knowledge.Happy coding!

Related Posts

  1. Google Plus Click Animation effect on Stream Page using Jquery
  2. Designing a form using pure CSS enhanced with Jquery
After Post

{ 1 trackback }

Gallery show | Pearltrees
March 5, 2012 at 3:30 am

{ 22 comments… read them below or add one }

John August 14, 2011 at 5:28 pm

very well explained . thanks for the tuts hyder !

Reply

Dayo August 15, 2011 at 2:44 pm

Hyder … this is a wonderful effect… Thanks…

Reply

nat September 14, 2011 at 12:37 pm

This is awesome! I was wondering how do I attach separate link to an individual large image?

Reply

Hyder September 14, 2011 at 1:01 pm

Edit the href and put your link . basic html :)

Reply

nat September 14, 2011 at 2:54 pm

Hi Hyder
…all large images are working with one link I am not so sure how to attach 4 separate links to 4 separate large images (small images are linkable separately within the html)

<!-- Block A for large image-->
     <a href="#largeimage" rel="nofollow">
      <!-- large Image is added here -->
     </a>

Reply

Hyder September 14, 2011 at 5:35 pm

Sorry nat , i didn’t look carefully at my code before replying to you.yes you are right . follow the steps below to achieve what your goal :
1)Download source code from above
2)At line 25,you have

$('#blockB a:last-child').prependTo('#blockB');

Just after this line add the following :

var_current_url = $('#blockB a:last-child').attr("href");
// Get the current url associated with the image
$('a#bigimgurl').attr('href',var_current_url);
//set the url e.g google.com to href html attribute

3)At line 82,you have :

<a href="#largeimage">

Edit it and add an id with value “bigimgurl”
to make it become :

<a  id="bigimgurl" href="#largeimage">

That’s all !
Explanation :
Basically, we are getting the url from the last image in block B and we are adding the url to Block A.I have tested it locally,it’s working fine . let me know if you have any issue implementing it .

Reply

nat September 14, 2011 at 5:59 pm

Hi Hyder, It works! I am a newby in the coding world. With your extremely fast response I am so motivated to improve/learn, thank you! :)

john October 3, 2011 at 5:17 am

Hi. is there any other option to not link the code given below?

Reply

Karl November 2, 2011 at 6:47 pm

Hi guys, I’ve extended the functionality of this script to create smooth transitions between big images rather than blasting to white & fading in through white.

I’ve added the following two lines right after ##### Block A code – START

var_current_bigimg = $(‘#blockA img’).attr(“src”);
$(“#blockA”).css(“background”,”url(“+var_current_bigimg+”)”);

Reply

Brenn September 19, 2012 at 4:56 pm

Thanks Karl! Exactly what I was looking for. It worked perfectly.

Reply

Jonathan November 3, 2011 at 6:58 pm

Great tutorial. How do you get your images to respect the border radius applied to the the itunes-block?

Reply

Eric December 8, 2011 at 11:28 pm

Great Tut! Just implemented this into my companies website, but am having issues with it in IE7 and 8 getting the error

SCRIPT438: Object doesn’t support property or method ’slice’

Any advice would be much appreciated

Reply

JennyLoveMX December 20, 2011 at 9:09 pm

Hi Hyder i tryed to add a separated links using your code from the comment but i can’t make it work. Could you help me? Please!

Greetings from Mexico.
Kisses, Jenny.

@JennyLoveMx

Reply

John December 27, 2011 at 11:38 pm

Hey, I really like this code and want to use it. But I’m hoping to have the large image to fade directly from image to image, not fading through white. I tried Karl’s modified code but it didn’t work. How can I implement a fade in BlockA?

Also, I’d like to bring in a secondary image in Block A that corresponds with Block B, but isn’t the same image. I want to create images in the aspect ratio of Block A, and another set of images in the aspect ration of Block B. How would I use the image in Block B to point to a secondary image when loading it into BockA rather than changing the name and class of the smaller image?

Thanks for your time!

This is a great tutorial. I’d be willing to pay for the upgraded code.

Reply

John December 28, 2011 at 12:21 am

Actually — nevermind. I figured it out myself!
Got block A fading nicely.

Reply

Hyder December 28, 2011 at 5:43 am

Decreasing the time interval to call the function below should make the images change faster :

timeout = setTimeout(function() { // call the function nextA() repeatedly evey 1000 ms
			nextA();
		}, 1000);

Reply

Pierre January 15, 2012 at 11:59 am

Hi Hyder,
I am new to web developing and am currently learning HTML/PHP for my final year project at University, and I really want to add this slideshow to my website. I added the HTML base + the CSS style and it comes up fine on my web page. But I am not sure how nor where to add all the PHP to make the banner “work”… Would you be able to help me with that?

Thank you in advance for your help.

Reply

Kunal Bhatu Salunkhe January 17, 2012 at 10:44 am

can i use this code joomla website. i was try this code joomla but not work.so please try to find out solution on that

Reply

Kim January 28, 2012 at 6:44 pm

Hello! Is there a way to use this slider but have the Block A images be contained in their own div elements so that I can have dynamic text inside each of those divs (so overlapping the image)? Thank you so much!!

Reply

esal February 24, 2012 at 10:21 pm

Hi,
i want to make something like clickable small image.
I mean that you can just click on small image in the right block and and to see big image in the left block.

In this version of slider u can switch pictures onl with the button. can u tell how to do it?

Reply

Samrat November 8, 2012 at 10:48 am

i want to make something like clickable small image.
I mean that you can just click on small image in the right block and and to see big image in the left block.

Reply

Ronny Dee October 15, 2012 at 11:47 am

Thanks, it works in my blog :)

Reply

Leave a Comment

Previous post:

Next post: