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!

Reply via email to