[jQuery] Creating an image thumnail rotator help!
Hi Guys
This is my first attempt at doing anything jQuery (that is partly my
own).
So please don't shoot me down :)
I would like your help, improving, my "simple" thumbnail rotator
script.
It is something I'm sure most jQuery gurus could code in a matter of
minutes, but has taken me the better part of the day, as I head bang
my way thru it.
This uses jQuery Timers (http://jquery.offput.ca/every/).
Also basically this works in Win..FF3 (haven't tested other browsers)
- However it really needs to have added image preloading - if you know
how..please share:)
Any code improvements, corrections, additions (preloading) would be
much appreciated.
<script type="text/javascript">
var start_image;
var next_image, next_num;
$.fn.thumb_change = function() {
start_image = $("img:first",this).attr("src");
var i=0;
jQuery.timer.add(this, "1s", "thumb_counter", function(){
next_num = i + 1;
if (next_num<10) next_num = "0" + next_num;
next_image = start_image.replace("01.jpg", next_num+".jpg");
$("img:first",this).attr("src", next_image);
i++;
if (next_num == 20) i=0;
});
};
$.fn.thumb_reset = function() {
jQuery.timer.remove(this, "thumb_counter"");
$("img:first",this).attr("src", start_image);
};
$(document).ready(function(){
$('a.thumbnail_link').mouseover($.fn.thumb_change)
.mouseout($.fn.thumb_reset);
});
</script>
THANK YOU!