Slideshow/Timer

[Cooper94]

Below is my code that switches through a gallery a pictures via a click of a button. My question is how would I get it to move automaticly to the next picture after a certain amount of time? Below is my code, thank you for all your time and help!

 

$(function() {

$('input.field').
    focus(function() {
        if(this.title==this.value) {
            this.value = '';
        }
    }).
    blur(function(){
        if(this.value=='') {
            this.value = this.title;
        }
    });

var currentPage = 1;
    $('#slider .buttons span').live('click', function() {
        var timeout = setTimeout(function() {$("img").trigger("slidermove")}, 300);
        var fragments_count = $(this).parents('#slider:eq(0)').find('.fragment').length;
        var fragmet_width = $(this).parents('#slider:eq(0)').find('.fragment').width();
        var perPage = 1;
        var numPages = Math.ceil(fragments_count/perPage);
        var stepMove = fragmet_width*perPage;
        var container = $(this).parents('#slider:eq(0)').find('.content');
        var firstPosition = 0;
        var lastPosition = -((numPages-1)*stepMove);
        
        if ($(this).hasClass('next')) {
            currentPage ++;
            if (currentPage > numPages) {
                currentPage = 1;
                container.animate({'left': firstPosition});
                return;
            };
            container.animate({'left': -((currentPage - 1)*stepMove)});
        };
        if ($(this).hasClass('prev')) {
            currentPage --;
            if (currentPage < 1) {
                currentPage = numPages;
                container.animate({'left': lastPosition});
                return;
            };
            container.animate({'left': -((currentPage-1)*stepMove)});
        };
    });
});

[RichardRotterdam]

Use setTimeout and call it self so it will be periodical.

 

like so:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var timepassed = 0;
function periodical(){
    var interval = 2000;
    timepassed += interval;
    $("#time").text(timepassed);
    // let it call it self so there is an endless loop
    setTimeout ( "periodical()", interval);

}
jQuery(document).ready(function(){
    periodical();
});

</script>
<b>msec passed:</b>
<div id="time"></div>

[Adam]

Surely setInterval() would be better suited here?

[RichardRotterdam]

Surely setInterval() would be better suited here?

heh well what do you know haven't even bumped into that one before. but yeah that one would be simpler