Easy Jquery Auto Image Rotator

3

The other week I had a friend ask me for a simple script to rotate a few images on his web page. Sounded simple and I even assumed I would not have to re-invent the wheel, but after an hour of searching for a lightweight script I was surprised to find that unless you were willing to install rather large plug-ins along with jquery there were not allot of options for the simple rotation of images except out-dated scripts. So I decided to come up with my own image rotator that uses jquery's already built in effects.

Jquery Image Rotator Functionality Checklist.

What we need our Jquery image rotator to do:

  1. Rotate Images with Links.
  2. Valid XHTML.
  3. Lightweight Script.
The Rotator as I have come to call it will simply auto rotate through a list of images with a smooth fade effect without the need to include an extra plug-in on top of Jquery.

Let's look at the XHTML, CSS, and Jquery Javascript that makes it work.

Jquery Image Rotator, View Demo, Download Source.

The HTML for our jquery image rotator gets placed in the body of your page.

<div id="rotator">
<ul>
<li class="show">
<a href="javascript:void(0)">
<img src="images/image-1.jpg" width="500" height="313" alt="pic1" />
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="images/image-2.jpg" width="500" height="313" alt="pic2" />
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="images/image-3.jpg" width="500" height="313" alt="pic3" />
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="images/image-4.jpg" width="500" height="313" alt="pic4" />
</a>
</li>
</ul>
</div>

The CSS


/* rotator in-page placement */
div#rotator {
position:relative;
height:345px;
margin-left: 15px;
}
/* rotator css */
div#rotator ul li {
float:left;
position:absolute;
list-style: none;
}
/* rotator image style */
div#rotator ul li img {
border:1px solid #ccc;
padding: 4px;
background: #FFF;
}
div#rotator ul li.show {
z-index:500;
}

The JavaScript


Include jquery and the below script in your page or in an attached file.



<script type="text/javascript">

function theRotator() {
//Set the opacity of all images to 0
$('div#rotator ul li').css({opacity: 0.0});

//Get the first image and display it (gets set to full opacity)
$('div#rotator ul li:first').css({opacity: 1.0});

//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('rotate()',6000);

}

function rotate() {
//Get the first image
var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first'));

//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));

//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');

};

$(document).ready(function() {
//Load the slideshow
theRotator();
});

</script>

To activate jquery image rotator place the above code in your page head or an attached file. You can adjust the time before the next image appears by altering the setInterval value as well as the fade time itself by changing the animate duration


[alohatechsupport.net]

Labels:
Loading related posts...
Reactions: 

3 comments:

April 2, 2011 at 7:18 AM sawiteam said...

Thank you for sharing the info. I found the details very helpful.

online pharmacy


April 9, 2011 at 9:20 AM busagulu said...

Very enlightening and beneficial to someone whose been out of the circuit for a long time.

Aromatherapy Treatments


April 11, 2011 at 7:37 AM qofaoken said...

Did you heard what Rob Matts said about that?

clomid


Post a Comment

2010 WEBSITE20. All rights reserved.