Guest Post – Creating an Image Rotator
Tags: Guest Post, Intermediate, Widgets
This is my second article over at designm.ag. An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch…
Related Posts
Author Bio
My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!
You can learn more about me or 
Follow me on twitter for more updates and resources!
Did You Enjoy This Post?
Subscribe via RSS or by email to get all upcoming tutorials and articles delivered straight to you.
+ Add Comment38 Peeps Have Spoken Their Minds...
Soh, that’s a real nice effect. I can see that being useful on home pages of sites that I’ve done. I’d make one minor change to it though. I would add a fadeIn (really fast, lets say around 200 milliseconds) on the main image.
This is really great Soh! This tutorial is already on my to-do list. Thank you.
Thanks Soh,
This tut is nice, easy to understand. Java script is becoming must-abillity for designer.
Thanks for it.
Thanks guys :-)
@ Neal, very good suggestion!! I was trying to keep it some what simple, but I guess two more lines of code would not hurt! Thanks for the suggestion :-)
This is a really great Image Rotator. The only thing I see that it need now is a automatic option.:)
-FireDart
Great!!! The best thing of every tutorial you post is how understandable they are (even for a spanish speaker hahaha!). Thanks for that.
Saludos desde Cuba.
Great work Soh! Could you mention how to add the fading effect when changing images as well as how to add an image preloader in case the images take a little while to come up.
Soh, the tutorial is brilliant, but I have attempted to modify the idea so that the ‘thumbs’ are in the same box as the ‘main image’, allowing me to use transparent background to hopefully give a more dynamic look to it, I am having some problems now though…
I have the xhtml and css code working and validating correctly, but the image replacement now doesn’t work as intended. I am presuming that this is because the java code is designed for the two elements being separate, so I was wondering if you would be able to shed some light on how I can fix this?
The working example is on the front page of http://www.envogen.co.uk
Any help would be very much appreciated
Hey Nick, Great idea and I like your approach to it. Only suggestion and possibly the simplest solution would be to do this:
Dont let it sit in the main image div, the jquery event is looking for certain elements to hit, and main image and thumb_view is a key part in it.
Instead, to achieve the visual portion of your approach, I would try to use absolute positioning and z-index, so that the thumb view can sit on top of your main image container. Since I have not tested this yet, you may hit some road blocks, but this would be my first approach in what your trying to achieve.
let me know your thoughts, Im sure there are several ways of going about doing this :-)
Thanks for the feedback Soh, I actually did the old trick of walk away from it and come back later …
It worked, I overcame my newbiness and solved the problem, working version is there, just need to mess with the style and images now, any suggestions are very welcome.
Once again, thank you for the original tutorial!
Nice! That old trick always works :-) Great job nick, glad to see you getting creative and applying the concept to your work! Good luck!
Sanat, I posted this on designmag but check it out:
$(“.main_image img”).animate({ opacity: 0}, 250 );
$(“.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(“.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginBottom: “0″ }, 250 );
$(“.main_image img”).attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 250 );
});
Here is the live demo: http://www.sohtanaka.com/web-design/examples/image-rotator/index2.htm
Thanks
Wow… this 1 is awesome!!!.. thanks for sharing this Soh… keep up.. :)
This might be a bit of a stretch. Or perhaps I’m going about this the wrong way? I’ve hidden the image_thumb section, and I’m using this purely for database population.
I’m using the code below to auto-rotate through the images and descriptions, but what I’m stuck on is how to also give the user the ability to click next and back through each item. Any ideas?
jQuery(function(){
$(“.main_image .desc”).show(); //Show Banner
$(“.main_image .block”).animate({ opacity: 0.65 }, 1 ); //Set Opacity
$(“.image_thumb ul li:first”).addClass(‘active’); //Add the active class (highlights the very first list item by default)
//runs function on click
$(“.image_thumb ul li”).click(function () {
$active = $(this);
slideSwitchClick();
})
.hover(function(){ //Hover effects on list-item
$(this).addClass(‘hover’); //Add class “hover” on hover
}, function() {
$(this).removeClass(‘hover’); //Remove class “hover” on hover out
});
//runs function, set timer here
$(function() {
//setInterval( ‘slideSwitchTimed()’, 6000 );
playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
});
//pauses on hover
$(‘.highlight’).hover(function() {
clearInterval(playSlideshow);
},
function() {
playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
});
});
function slideSwitchTimed() {
$active = $(‘.image_thumb ul li.active’).next();
if ( $active.length == 0 ) $active = $(‘.image_thumb ul li:first’); //goes back to start when finishes
slideSwitch();
}
function slideSwitchClick() {
slideSwitch();
}
function slideSwitch() {
var $prev = $(‘.image_thumb ul li.active’);
//Show active list-item
$prev.removeClass(‘active’);
$active.addClass(‘active’);
//Set Variables
var imgAlt = $active.find(‘img’).attr(“alt”); //Get Alt Tag of Image
var imgTitle = $active.find(‘a’).attr(“href”); //Get Main Image URL
var imgDesc = $active.find(‘.block’).html(); //Get HTML of the “block” container
var imgDescHeight = $(“.main_image”).find(‘.block’).height(); //Find the height of the “block”
if ($(this).is(“.active”)) { //If the list item is active/selected, then…
return false; // Don’t click through – Prevents repetitive animations on active/selected list-item
} else { //If not active then…
//Animate the Description
$(“.main_image img”).animate({ opacity: 0}, 250 );
$(“.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(“.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginBottom: “0″ }, 250 );
$(“.main_image img”).attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 250 );
});
}
return false;
}
Hi there, I would like to add that I have solved my above problem by adding these pieces of code to the above script
//runs function on click “next”
$(“.nextTour”).click(function () {
clearInterval(playSlideshow);
$active = $(‘.image_thumb ul li.active’).next();
playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
if ( $active.length == 0 ) $active = $(‘.image_thumb ul li:first’); //goes back to start when finishes
slideSwitch();
})
//runs function on click “prev”
$(“.prevTour”).click(function () {
clearInterval(playSlideshow);
$active = $(‘.image_thumb ul li.active’).prev();
playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
if ( $active.length == 0 ) $active = $(‘.image_thumb ul li:last’); //goes back to start when finishes
slideSwitch();
})
Where the classes nextTour and prevTour rotate the images forwards and backwards whilst also resetting the slide timer to avoid unwanted ‘jumping’ when scrolling through the items quickly.
Now I’m playing with easing animations…
Love this script! =D
Hey Mick,
Do you all your code in one place with an example of the auto scroll working?
I was just wondering and this might be a pretty dumb question, but how would you go about having the main image panel hidden instead of it always being shown? This way the user would have the option to click and see more information. I hope that made sense.
Eric
Hi Sam, not yet.
I’ll put something together this week and post here so you can laugh at my poorly written code :)
Meanwhile can I make another suggestion for this? I think it would be better to put a .stop() method in the animation. Maybe something like this?
$(“.main_image img”).stop().animate({ opacity: 0}, 650 );
$(“.main_image .block”).stop().animate({ opacity: 0, marginTop: -imgDescHeight }, 650 , function() {
$(“.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginTop: “0″}, 1700 );
$(“.main_image img”).stop().attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 650 );
Hey Mick,
That would awesome! Thanks alot for that
Hi Mick,
Can you put your code in the same file, to better view ?
if you have a demo, it’s welcome …
Thanks.
Here is the code i put, and that does not work with me:
/************/
jQuery(function(){
$(”.main_image .desc”).show(); //Show Banner
$(”.main_image .block”).animate({ opacity: 0.65 }, 1 ); //Set Opacity
$(”.image_thumb ul li:first”).addClass(’active’); //Add the active class (highlights the very first list item by default)
$(”.main_image img”).stop().animate({ opacity: 0}, 650 );
$(”.main_image .block”).stop().animate({ opacity: 0, marginTop: -imgDescHeight }, 650 , function() {
$(”.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginTop: “0?}, 1700 );
$(”.main_image img”).stop().attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 650 );
//runs function on click
$(”.image_thumb ul li”).click(function () {
$active = $(this);
slideSwitchClick();
})
//runs function on click “next”
$(”.nextTour”).click(function () {
clearInterval(playSlideshow);
$active = $(’.image_thumb ul li.active’).next();
playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
if ( $active.length == 0 ) $active = $(’.image_thumb ul li:first’); //goes back to start when finishes
slideSwitch();
})
//runs function on click “prev”
$(”.prevTour”).click(function () {
clearInterval(playSlideshow);
$active = $(’.image_thumb ul li.active’).prev();
playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
if ( $active.length == 0 ) $active = $(’.image_thumb ul li:last’); //goes back to start when finishes
slideSwitch();
})
.hover(function(){ //Hover effects on list-item
$(this).addClass(’hover’); //Add class “hover” on hover
}, function() {
$(this).removeClass(’hover’); //Remove class “hover” on hover out
});
//runs function, set timer here
$(function() {
//setInterval( ’slideSwitchTimed()’, 6000 );
playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
});
//pauses on hover
$(’.highlight’).hover(function() {
clearInterval(playSlideshow);
},
function() {
playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
});
});
function slideSwitchTimed() {
$active = $(’.image_thumb ul li.active’).next();
if ( $active.length == 0 ) $active = $(’.image_thumb ul li:first’); //goes back to start when finishes
slideSwitch();
}
function slideSwitchClick() {
slideSwitch();
}
function slideSwitch() {
var $prev = $(’.image_thumb ul li.active’);
//Show active list-item
$prev.removeClass(’active’);
$active.addClass(’active’);
//Set Variables
var imgAlt = $active.find(’img’).attr(”alt”); //Get Alt Tag of Image
var imgTitle = $active.find(’a’).attr(”href”); //Get Main Image URL
var imgDesc = $active.find(’.block’).html(); //Get HTML of the “block” container
var imgDescHeight = $(”.main_image”).find(’.block’).height(); //Find the height of the “block”
if ($(this).is(”.active”)) { //If the list item is active/selected, then…
return false; // Don’t click through – Prevents repetitive animations on active/selected list-item
} else { //If not active then…
//Animate the Description
$(”.main_image img”).animate({ opacity: 0}, 250 );
$(”.main_image .block”).animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(”.main_image .block”).html(imgDesc).animate({ opacity: 0.85, marginBottom: “0? }, 250 );
$(”.main_image img”).attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 250 );
});
}
return false;
}//Close Function
/************/
thank you in advance to make corrections to this code ;)
Didn’t mean to leave you guys hanging on this one.
I’ve slapped together a quick sample which you can see here http://users.tpg.com.au/mickstah/
It is by no means clean or efficient code but it gets the job done. If anyone has any suggestions on how to clean it up it would be quite welcome :)
I’m rather new to jquery so it has been a fun learning experience!
I should add, for my example I have hidden the side image navigation so that I can add or remove as many items as I like in a database without it effecting the appearance of the side navigation (although I think if you added some sort of scroll feature to the navigation then it would look quite nice with multiple entries)
Thanks heaps Mick, works perfect, just one thing: how do I disable the auto-slideshow when a tab is manually clicked and the mouse cursor is still on the image?
Thanks again
Figured it out:
jQuery(function() {
$(“.main_image .desc”).show();
$(“.main_image .block”).animate({
opacity: 0.85
},
1); //Set Opacity
$(“.image_thumb ul li:first”).addClass(‘active’); //Add the active class (highlights the very first list item by default)
//runs function on click
$(“.image_thumb ul li”).click(function() {
$active = $(this);
slideSwitchClick();
}).hover(function() { //Hover effects on list-item
$(this).addClass(‘hover’); //Add class “hover” on hover
},
function() {
$(this).removeClass(‘hover’); //Remove class “hover” on hover out
});
//runs function, set timer here
$(function() {
//setInterval( ‘slideSwitchTimed()’, 7500 );
playSlideshow = setInterval(“slideSwitchTimed()”, 2000);
});
//pauses on hover
$(‘.main_image’).hover(function() {
clearInterval(playSlideshow);
},
function() {
playSlideshow = setInterval(“slideSwitchTimed()”, 2000);
});
});
function slideSwitchTimed() {
$active = $(‘.image_thumb ul li.active’).next();
if ($active.length === 0) $active = $(‘.image_thumb ul li:first’); //goes back to start when finishes
slideSwitch();
}
function slideSwitchClick() {
slideSwitch();
}
function slideSwitch() {
var $prev = $(‘.image_thumb ul li.active’);
//Show active list-item
$prev.removeClass(‘active’);
$active.addClass(‘active’);
//Set Variables
var imgAlt = $active.find(‘img’).attr(“alt”); //Get Alt Tag of Image
var imgTitle = $active.find(‘a’).attr(“href”); //Get Main Image URL
var imgDesc = $active.find(‘.block’).html(); //Get HTML of the “block” container
var imgDescHeight = $(“.main_image”).find(‘.block’).height(); //Find the height of the “block”
if ($(this).is(“.active”)) { //If the list item is active/selected, then…
return false; // Don’t click through – Prevents repetitive animations on active/selected list-item
} else { //If not active then…
//Animate the Description
$(“.main_image img”).stop().animate({
opacity: 0
},
650);
$(“.main_image .block”).stop().animate({
opacity: 0,
marginTop: -imgDescHeight
},
650, function() {
$(“.main_image .block”).html(imgDesc).animate({
opacity: 0.85,
marginTop: “0″
},
1700);
$(“.main_image img”).stop().attr({
src: imgTitle,
alt: imgAlt
}).animate({
opacity: 1
},
650);
});
}
return false;
}
Thanks again.
hy Soh, my name is Chris and i‘m a webdesign rookie..
I tried to follow your tutorial ‚Create an Image Rotator with Description (CSS/jQuery)‘. Unfortunately I coulden‘t follow it.. so could you sent me a .zip file, so i can see how it‘s build up. would be awesome,
Best wishes, from switzerland,
Chris
Hi Soh… This is great. I’m busy adding it to my homepage now! Cheers Steve
Hello, really nice work with the rotator. I am integrating it in the new site of our company (under construction) and thanks you a lot for it.I have a misunderstanding about the button show/hide. When i click on it, full page is going to be centered on the rotator, and on first display page get down to be centered on it. If i click hide button, the page comes back to its ‘normal’ position. I tried to manage this but without success. Have someone seen the same thing and have a trick to fix ?
Kr, Louis
This script can’t work in my blog…
I would like to know how this is put together. I came across your site and have attempted to assemble the project with mixed results. Do you have a zipped file you could make available to me? I am trying to teach myself something new as I find things to try.
Great Js plugin Soh, simple and very effective.
Quick question though. How can I stop the ‘tip’ from showing on the load of the page? Basically so it ‘Hides’ first instead of showing.
Im trying to get this into wordpress but my php skill is novice. Anyone attempted to create a plugin?
Superb rotator, really liking this.
Quick question. What licence does this fall under? Creative Commons / MIT / GPL ??
Thanks
Hi Soh, lovely script btw!
I was wondering if you have any suggestions when it comes to adding images in the area for all the items.
Instead of using standard html text for links. I would like to make use of a button images.
Somehow, .jpg or .png images don’t render at all. They appear as empty blue boxes. Any suggestions or tips?
This is a really great Image Rotator, thanks for share
I absolutely love this. I would however like to see a scroll bar added so you can use more than the six in the default layout. Anyone got any suggestions on how to do this?
stucked here //runs function on click “prev”
$(”.prevTour”).click(function () {
clearInterval(playSlideshow);
$active = $(’.image_thumb ul li.active’).prev();
playSlideshow = setInterval( “slideSwitchTimed()”, 6000 );
if ( $active.length == 0 ) $active = $(’.image_thumb ul li:last’); //goes back to start when finishes
slideSwitch();
})
Speak Your Mind...