jQuery Simple Image Rotator

UPDATED 2012-09-23: Changed image source to lorempixel.com

UPDATED 2011-3-9: I have changed the images used in the embedded demo script because imageshack as blocked the hotlinking of their images. I’ve downloaded images from istockphotos and uploaded in the site. I’ll also be doing this in other affected posts. Thanks! -Jhoy


A simple image rotator using jQuery.

This article will show you how to create a simple rotating gallery images using jQuery and setInterval.

jQuery Documentation Readings

Header Script

Place this in your <head> tag

{code type=”html”}
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js” type=”text/javascript”></script>
<style type=”text/css”>
#featured_images{font-family:Arial,sans-serif;width:400px;height:325px;font-size:12px;border:solid 1px #13609F;}
#featured_images *{margin:0;padding:0;}
#featured_images ul{list-style:none;}
#featured_images ul li{float:left;width:94px;padding:3px;text-align:center;}
#featured_images ul li .preview_url{display:none;}
#featured_images ul li.active{background-color:#13609F; font-weight:bold; color:#ffffff;}
</style>
{/code}

Body Script

Place this where you want to display your rotating images.

{code type=”html”}
<div id=”featured_images”>
<ul>
<li class=”active”>
Image 1
<span class=”preview_url”>
http://img259.imageshack.us/img259/3508/swansuu4.jpg
</span>
</li>
<li>
Image 2
<span class=”preview_url”>
http://img232.imageshack.us/img232/8834/39241720wj7.jpg
</span>
</li>
<li>
Image 3
<span class=”preview_url”>
http://img222.imageshack.us/img222/1839/31bx.jpg
</span>
</li>
</ul>
<div class=”preview_area”>&nbsp;</div>
</div>
{/code}

How does our body script works?

Line 1: <div id=”featured_images”></div> will serve as our wrapper
Line 3: <li class=”active”> for our active element
Line 4: Text for our image
Line 7: <span class=”preview_url”> would be the container for the url of the images to be rotated
Line 28: <div class=”preview_area”>&nbsp;</div> would be the container of our preview image

jQuery Script

Place this before the </body> tag

{code type=”javascript”}
<script type=”text/javascript”>
jQuery(document).ready(function(){

var total_images = jQuery(“#featured_images li”).length;

if (total_images > 0){
var first_image = jQuery.trim(jQuery(“#featured_images li:first span.preview_url”).html());
jQuery(“.preview_area”).html(‘<img src=”‘ + first_image + ‘” />’);
jQuery(“#featured_images li:first”).addClass(‘active’)
runRotator();
}

function runRotator(){
var start_ctr = 1;

setInterval(function() {
jQuery(“#featured_images li”).removeClass(‘active’);

var li_elem = “#featured_images li:eq(” + start_ctr + “)”;
var preview_url = jQuery(li_elem + ” span.preview_url”).html();

preview_url = jQuery.trim(preview_url);
jQuery(li_elem).addClass(‘active’);
jQuery(“.preview_area”).html(‘<img src=”‘ + preview_url + ‘” />’);

start_ctr++;

if (start_ctr == total_images) {
start_ctr = 0;
}
}, 3000);
}
})
</script>
{/code}

How does the jQuery Works?

Line 4: Get number of <li> to be rotated.
Line 6: Check if we have a list to display
Line 7: Get the image url of our first image. We used jQuery.trim() to remove whitespace
Line 8: Let us display our image inside our <div class=”preview_area”></div>
Line 9: Highlight the first <li> element
Line 10: Call the runRotator function to start rotating the images
Line 14: Start rotating from the second element. We will be calling our element in array indeces, for example first element = 0, second element = 1 and so on. We will start with the second image because we have already displayed our first image (Line 8).
Line 16: We will use setInterval to set continuous looping event for our image rotator
Line 17: Let us remove active class from all <li> element
Line 19: Using jQuery eq() selector, we will assign our current element to li_elem variable. Our current <li> element would be the value of our start_ctr
Line 20: We will now take our preview url inside our current <li> element’s <span class=”preview_url”></span>
Line 22: Clean whitespace using jQuery.trim()
Line 23: Add the active class to our current <li> element
Line 24: Display our image inside <div class=”preview_area”></div>
Line 26: Increment our counter
Line 28: Check if we are at the last element, if so
Line 29: Reset counter to zero to start back to the first element
Line 31: Let us set our interval timing to 3 seconds. 1 second = 100

Demo

See our script in action

Download file: jQuery Simple Image Rotator (Right Click + Save As)

HTH

Thanks for reading 🙂

Recommended Posts