Simple jQuery Rotator

A friend of mine needed a simple image rotor, so after a little pestering I finally decided o make one. It’s dead simple, and theres tons of room for improvement, but it seems to be pretty reliable and they liked it. Figured I’d post it here, perhaps someone can use it and improve upon it.

The script uses 3 parts, first the HTML layout

Snipplr: http://snipplr.com/view/57077/simple-jquery-rotator/

This is pretty simple, you have a container (which isn’t required code-wise), some divs used for the previous and next button sprites (given the IDs rotator_prev and rototor_next respectively) and in the middle is a the rotator_box div, thats the area that actually shows the images or whatever other content you want (The script can handle anything placed in that div). Finally inside the rotator_box there are rotator_set boxes, each one of these has a number at the end of it, each 1 greater than the last. Like I said this was a simple, quickly made rotator.

There is also some CSS applied to this code, the important stuff is below.

Snipplr: http://snipplr.com/view/57077/simple-jquery-rotator/

The most important part of that is the defined width and height, along with the overflow set to hidden. This gives you a box of the right size to show the content you want, and hides the rest of the content out of view. This can be done in a linear row, a grid, a column, whatever you want, just adjust the width and height.

Finally the last part which pulls it all together, the jQuery script.

Snipplr: http://snipplr.com/view/57077/simple-jquery-rotator/

This script runs on document load and does a few things. First, it defined two onclick events for the next and previous buttons. All they do is add or subtract to the lastloaded variable used to determine what is being displayed, after they do that they run the update function. The update function fades the currently visible items out, and fades the next one in. After it’s faded in, the script reset it’s opacity to 1. This is just a precaution, without the explicit opacity reset click to quickly will cause a minor flitch where an image will no longer fade to full opacity.

Thats it. As I said it was made quickly and simply, but it works great. If you want to see it in action you can check out the Simple jQuery Rotator example, theres some notes in the code (although nothing not covered by this post) and it’s in an external file if you’d like a copy to play around with. If you find a good use for this or make any improvements let me know and I’ll post about them.

Leave a Reply

Your email address will not be published. Required fields are marked *