Topic: help with timing

hello,

I'm writing a script for a image slideshow, yes I know how boring, but it needs to be done.  anyway I have it set up so you can choose between manual or automatic mode.  In manual you hover over the thumbnail to see the larger version with a title.  In auto it goes by itself.  Here lies my problem. 

function autoRun() {
    document.photo.src = 'images/blank.gif';
    var gallery = document.getElementById("thumbs");
    var links = gallery.getElementsByTagName("a");
    for (var i=0; i < links.length; i++) {
        document.photo.src = links[i].href;
    }
}

I have that which loops through the set of links containing the images, gets the image then swaps another out to hold it. here is the html

<div id="thumbs">
        <a href="images/big/photo1bw.jpg" title="photo 1"><img src="images/thumbs/photo1bws.jpg" alt="" /></a>
        <a href="images/big/photo3bw.jpg" title="photo 2"><img src="images/thumbs/photo3bws.jpg" alt="" /></a>
        <img id='spinner' src='images/spinner.gif' />
    </div>
   
    <img id="photo" name="photo" onLoad="loaded()" src="images/blank.gif" />


Right now it jumps right to the last photo becasue there is nothing to make it pause after each one.  How can I get that loop to pause after each one?  Not sure if I posted enough of the code for it to make sense.  any ideas?

thanks,

Dan

Re: help with timing

You need to use setTimeout to create the delay. Something like this should do it.

        function autoRun() {
                var linksArray = document.getElementById("thumbs").getElementsByTagName("a");
                currentPhotoSrc = document.getElementById("photo").src;
            nextPhotoSrc = linksArray[0].href; //default is start with first photo
                for (var i=0; i < linksArray.length; i++) {
                        if (linksArray[i].href == currentPhotoSrc) {
                            if (linksArray[i+1]) {
                                nextPhotoSrc = linksArray[i+1].href;
                            } else {
                                nextPhotoSrc = linksArray[0].href; //starts back at 0 when at last link
                            }
                        }
            }
                document.getElementById("photo").src = nextPhotoSrc;
                window.setTimeout(autoRun,5000);
        }
       
        onload = autoRun;

First we create an array of all the image links. Next we find out the src of the current big image (id=photo). We create a variable to store the src of the next image and we make it the first image by default. We then loop through the image link array and see if the src of any links is the same as the current image. If we get a match we check to see if there is another link in the array after the current one and if so make this the src for the next image. If we are at the last index of the array (i.e. the last image in the list) then we set the next image src back to the src for the first image link in the array. We then set the src of the big image to the value we stored. We then call setTimeout to call the function again in 5000 milliseconds i.e. 5 seconds.

With this function you can have an unlimited number of images and it will always show the next one in the sequence.

Re: help with timing

By the way if you then want to stop the auto run you will need to use clearTimeout. There's more info at W3Schools on timing javascript events

So in the previous code before all your functions declare a global variable

var timer;

change the following line:
window.setTimeout(autoRun,5000);

to
timer = window.setTimeout(autoRun,5000);

You can then write a function to stop the auto run by clearing the timeout.
function stopAutoRun() {
            window.clearTimeout(timer);
        }

Re: help with timing

can you please show the view part (.html.erb) of this functionality..
thanks