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.
1 2 3 4 5 6 7 8 9 |
#rotator_box{ width: 354px; height: 254px; background-color: black; display: inline-block; vertical-align: middle; padding: 4px; overflow: hidden; } |
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.
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 |
$(document).ready(function(){ var lastloaded = 1 var maxloadable = $('#rotator_box > div').length; $('#rotator_prev').click(function(){ if(lastloaded-1==0){ lastloaded = maxloadable; }else{ lastloaded = lastloaded-1; } update(); }); $('#rotator_next').click(function(){ if(lastloaded+1>maxloadable){ lastloaded = 1; }else{ lastloaded = lastloaded+1; } update(); }); function update(){ $("#rotator_box > *:visible").fadeOut(175,function(){ $("#rotator_set_"+lastloaded).fadeIn(175,function(){ $("#rotator_set_"+lastloaded).css('opacity','1'); }); }); } }) |
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.