Useful Resources for Web Designers and Developers

Advertise

here through BuySellAds

How to Create a jQuery Image Rotator from Scratch

December 1, 2012 on Tutorials

Learn how to code a simple Image Rotator without using a plugin

So it’s that time again to roll up our sleeves and do some old fashioned front end a’ coding. This tutorial is for an Image Rotator. What is it you ask? An Image Rotator is particularly useful for galleries, articles, or portfolios. You can use it just about anywhere you want to cycle through content. First, take a look at the demo to see what we’re building:

View in Github

But there’s hundreds of plugins out there that do this same thing? True – but there’s nothing like writing one for yourself. See, the problem with using a plugin – is that you’re quite limited to the options that they allow you to pass. By writing one for yourself – you know exactly what’s going on and you have total control of what goes on. Ready to get started?

On a side note, if you want to learn more jQuery, CSS and PHP, don’t forget to check out our Tutorials category where you’ll find lots of useful stuff.

image rotator2 How to Create a jQuery Image Rotator from Scratch

The Markup

The challenge is: we want a clean markup as possible. This makes it easy for search engines to crawl through our content. Start with the code below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="featured" >
	<ul class="tabs">
		<li>Smelling my Fart</li>
		<li>Some Crazy Colors</li>
		<li>Awesome Hairdo</li>
		<li>Color Cans Bruh</li>
		<li>Grafitti All Over</li>
	</ul>
	<div class="container">	
		<img src="images/image1.jpg"/>
	</div>	
	<div class="container">
		<img src="images/image2.jpg" />
	</div>
	<div class="container">
		<img src="images/image3.jpg" />			
	</div>  
	<div class="container">
		<img src="images/image4.jpg"/>			
	</div>
	<div class="container">
		<img src="images/image5.jpg"/>			
	</div>	
</div>

You see, all we have is a mother div. Inside is an unordered list followed by images with enclosed divs around them. This is enough to get our Rotator cooking.

rotator 0 How to Create a jQuery Image Rotator from Scratch

Add Some Javascript

We’re going to use the jQuery Library for our Rotator because of it’s ease of use, and browser compatibility. Make sure in your HTML, you link to the library by adding this line of code in your head section:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" 
type="text/javascript"></script>

Then open up another script tag, and place the code below:

1
2
3
4
5
6
7
$(document).ready(function(){	
	$('.container').each(function(e){
		if(e == 0){
			$(this).addClass('current');
		}
		 $(this).attr('id', 'handle' + e);
	})

This loops through all of our “container” divs and adds an “id” attribute to them. The Ids are called “handle” along with “e” – which is the index (a number for each of them). It also adds a class “current” to the first one it finds.

rotator 2 How to Create a jQuery Image Rotator from Scratch

Next, add the code below inside the document ready clause.

1
2
3
4
5
6
7
8
9
10
11
12
13
$('.tabs li').each(function(e){
		if(e == 0){
			$(this).addClass('current'); 
		}
		$(this).wrapInner('<a class="title"></a>'); 			
		$(this).append('<a><img /></a>'); 	
		$(this).children('a').attr('href', '#handle' + e);	
		y = $('#handle' + e + ' img').attr('src'); 
		$(this).find('img').attr('src', y); 
		t = $(this).children('a').text(); 
		$('#handle' + e).append('<h2>' + t + '</h2>'); 	
 
	})

Line by line – the code above loops through each of our list items (li tags). It adds the class “current” to the first one it finds. Then wraps the text inside around an anchor tag with class “title”. It then appends another anchor tag with an image inside of them. It finds all of the anchor tags and adds attribute “href” – with a link to “#handle” plus “e” (Remember the ids we assigned to the containers a while ago?).

You see the variable “y” – it’s actually grabbing the large image’s src attribute and storing it in a temporary variable, then assigns it to the small image that we’ve dynamically created above. Finally, variable “t” is grabbing the list item’s text – and assigns it to an H2 tag for the large images. Take a look at your mark up now:

rotator 3 How to Create a jQuery Image Rotator from Scratch

Some Events

We have our clean markup, we’ve dynamically altered it with Javascript and now we’re creating some events. We want the images to automatically rotate, as well as switch once the small images are clicked. Let’s do that first.

Add the lines of code below:

1
2
3
4
5
6
7
8
9
10
11
$('.tabs li a').click(function(){
		c = $(this).attr('href'); 		
		if($(c).hasClass('current')){
			return false;
		}else{
			showImage($(c), 20);
			$('.tabs li').removeClass('current');
			$(this).parent().addClass('current');
			return false;
		}			
})

The above code adds some events once we click any of the anchor tags inside our li tags. It first checks that if the container we’re clicking for has a “current” class – we immediately exit (by calling return false). If it doesn’t, we run a function called “showImage” (which we haven’t built yet). It also removes ANY “current” class on ALL li tags, then adds “current” ONLY to it’s parent.

The showImage() Function

We create functions so we can reuse it anywhere in our code. The showImage() function simply changes the z-index property and opacity of the image container.

1
2
3
4
5
6
7
8
9
function showImage(img, duration){ 
	$('.container').removeClass('current').css({
			"opacity" : 0.0, 
			"zIndex" : 2
			});
	img.animate({opacity:1.0}, duration, function(){		
		$(this).addClass('current').css({zIndex:1});
	});	 	
}

Place the above code outside of the document.ready clause (but inside our script tags). You notice that showImage() accepts two parameters – the image and duration. In our previous click event – we pass “c” – which was the “href” value of whichever anchor tag we clicked. We also pass “20” – which means 20 milliseconds.

The rotateImages() Function

Now we want to automatically cycle through the large and small images. We create two functions for this – rotateImages() and runRotateImages(). The main one – rotateImages() does all of the work:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function rotateImages(){	
	var curPhoto = $("div.current");
	var nxtPhoto = curPhoto.next();		
	var curTab = $(".tabs li.current");
	var nxtTab = curTab.next();				
 
	if (nxtPhoto.length == 0) {
		nxtPhoto = $('#featured div:first');	
		nxtTab = $('.tabs li:first-child');			
	}					
 
	curTab.removeClass('current');
	nxtTab.addClass('current');
	showImage(nxtPhoto, 300);
 
}
function runRotateImages(){
	xx = setInterval("rotateImages()", 4000);	
}

It first looks for the list items, and container with the “current” class in them. Note that this could be the first – or anyone of them once we click. Then it checks if there’s no div after it by checking length “(nxtPhoto.length == 0)”, and goes back to the first list item and div if there’s none.

Again, it removes “current” class and adds it to the next. Finally, we run the “showImage()” function and pass “nxtPhoto” and 300 milliseconds. As you might have guessed, runRotateImages() simply runs rotateImages(). But it is wrapped in setInterval() and assigned to a variable “xx”. This will allow us to pause and proceed with our animation at any given time.

Let’s add the call to our two functions inside the document.ready clause:

1
2
3
4
5
6
7
8
9
runRotateImages();	
	$("#featured").hover(
		function(){					
			clearTimeout(xx);
		}, 
		function(){					
			runRotateImages();
		}
	)

The above runs our main animation, then we create a pause on hover() on top of our main div by using “clearTimeout()”. It proceeds to our main function on hover out.

We can’t preview any of our code as of yet – we can’t really see improvements at this stage. Let’s beautify our work with some styles. That’s coming up next.

Some CSS Magic

Here we are, the final part of our exercise. If you’ve stuck with me all this time – you guys are true web devs. So I’m not going to explain what the style does – you can figure that out for yourself. Wrap the code below in a set of style tags:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
#featured{ 
	width:518px; 
	padding: 18px 120px 10px 21px;
	background:  #ebebeb !important;
	position:relative; 
	border:1px solid #ccc; 
	height:434px; 
	background:#fff;
	margin-bottom:35px;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}
 
#featured ul.tabs{ 
	position:absolute; 
	top:18px; 
	left:538px; 
	padding:0; 
	margin:0; 
}
 
#featured ul.tabs li{ 	 
	font-size:10px; 
	color:#666; 
	line-height:10px;
	height:75px; 
	color:#333;
	overflow:hidden;
	width:96px;	 
	background:#fff;
	margin-bottom:11px;
	position:relative;
} 
#featured ul.tabs li a.title{
	position:absolute;
	z-index:5;
	color:#fff; 
	font-family:arial;
	bottom:7px;
	width:96px;
	text-align:center;
	text-shadow:1px -1px 0 #000;
	text-decoration:none;
}
#featured ul.tabs li img {
	width:96px;
	height:75px; 
	opacity:0.5;
	z-index:3;
} 
#featured ul.tabs li.current img, #featured ul.tabs li img:hover {
	opacity:1.0;
} 
 
#featured div.container img { 
	height: 420px;
    width: 500px;
	position:absolute;
}
#featured div.container {position:relative; z-index:0;}
#featured div.container.previous {z-index:1;}
#featured div.container.current {z-index:2;}
 
#featured h2{ 
	font-size:40px; 
	font-family:Arial; 
	color:#fff; 
	padding:5px 5px 5px 12px; margin:0;
	overflow:hidden; 
	line-height:65px;
	text-transform:uppercase;
	height:50px; overflow:hidden;
	position:absolute;
	top:350px;
	text-shadow:1px -1px 0 #000;
	text-align:center;
	letter-spacing:-1px;
	width:475px;
}

Simply put, the CSS arranges all of the big images into an absolute position – so they’re all stacked up on top of each other. The list items are also positon – but to the right of the large images. Additional styles are added to the current list items: less opacity on the inactive ones. This gives a nice touch to our animation. The rest are styles related to the demo file.

Conclusion

There are no download files for this tutorial – you can simply go to the demo and view it’s source and copy it. My intentions are for you to actually follow the above tutorial and do it yourself. Also check out these Image Rotators that are have different approaches code-wise, but the final output is somewhat similar. Don’t forget to check out jQuery for Beginners, the video series from Udemy!

  • altec

    The reason I ask is, I’m trying to modify Agency theme to take the first image in a post instead of the Featured Image (I want a different thumbnail displayed than what is shown in the slider). I haven’t had much luck so far, though it might be more complex than realistic.

  • http://fearlessflyer.com Michael Soriano

    had fun writing this tutorial. hope you find it useful

  • http://twitter.com/javadewd Java Dew(D)

    Quick question. What modifications have to be done to make it fade from the previous one to the next one instead of fading up from white? I’ve been piddling with it for way, way, way too long…

    • http://fearlessflyer.com Michael Soriano

      You should be able to play with the .css transitions in the showImage() function. Maybe .animate() it instead and test opacity settings etc.

      • http://twitter.com/javadewd Java Dew(D)

        That’s what I’ve been doing, but the function just prior to fading in the image sets all images to opacity 0.0 and zIndex 2, including the one I want to fade up the next one in front of. Is there a way to keep that one from getting blanked out like the rest? I even tried passing a second variable in the showImage() function (current and next) and couldn’t figure it out.

      • http://fearlessflyer.com Michael Soriano

        maybe try positioning? I’m not so sure – I have to play with it myself. Be sure to post your solution here though.

      • http://twitter.com/javadewd Java Dew(D)

        Will do. Thanks!

    • http://fearlessflyer.com Michael Soriano

      Play around with the showImage() function – instead of opacity to 0.0, maybe do the opposite.

  • dvln

    if possible, please provide a download link for this tutorial.

    • http://www.facebook.com/mikesoriano Michael Soriano

      sorry i don’t have a download for this. my intent is for you to follow the steps

  • http://www.facebook.com/romulo.zoch Rômulo Torres Zoch

    thanks for that

  • http://www.facebook.com/romulo.zoch Rômulo Torres Zoch

    it took me a lot of time , but i finally made it into this:
    http://i.imgur.com/YwnI8Wy.png

    it was easier after a took a shower to refresh my mind lol

    thank you very much
    my next step is smooth the image transitions

    • http://fearlessflyer.com Michael Soriano

      thats so awesome!

    • JeffA

      How did you go about making the description a different text style then the H2 header?

      • JeffA

        Scratch that, I got it,

  • johny

    Hi!

    need help about thumb images i want i to put outside the #feature css and make it horizontally . hard to display the div images horizontally

  • JeffA

    How hard would it be to make the thumbnails scrollable with say 10 images?

    • Bee

      Yes, this is a great idea! Have you found an answer to this already? Would you be so kind to share this?

    • http://fearlessflyer.com Michael Soriano

      it shouldn’t be that hard. You just need to set the css property of your thumbnail container to overflow: auto

  • Pingback: Trouble Positioning Text Over An Image | BlogoSfera

  • freestyle

    I change click image by hover and i see the bug, but i don’t understand to fix that. When u hover some image and hover out of #featured, try that some time and when u hover a image, the slider will not stoped? how to fix that thank :)

  • Jeff M

    What would be the easiest way to add an external link to either the photo or the tag on the photo. I want each image or headline to link to another page on our site. I have been trying for a while and the link keeps getting out of order.

    Thanks

    • http://fearlessflyer.com Michael Soriano

      You can add a new attribute for each link item:

      and it the part where you’re creating the large images, do something like:

      var theLink = $(this).attr(‘data-item’);
      $(‘#handle’ + e).append(‘a href=”‘+theLink+'”>’ + t + ‘/a>’);

      • Jeff M

        Thanks for the reply Michael. In my case I have 3 images. I tried what you posted and the link works correctly on the first photo but once it rotates, it pulls the wrong link, in my case the link from the 3rd picture when the second picture appears. It continues being out of order as it rotates through. The first link never comes back as it rotates through, just the second and third on the wrong picture. The text is correct, just not the link. Any ideas?

        Thanks again for your help!

      • http://fearlessflyer.com Michael Soriano

        can you paste your code to http://pastebin.com/

      • Jeff M