Delay start of Javascript function

I have three of these Dynamic Drive slideshows:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

running on my page here:

http://www.piarti.org/index-a.php

i want them to start at 2.5 second intervals instead of all at the same time. I guess this is a setTimeout job, but I don't see quite how to do it. Any expert like to tell me how please?

Peter Finch

Not an expert, you'll have to settle for me.

Off Topic:


ba dum tss

The thing about setTimeout is that it takes a single function, and (for cross-browser compatibility) that function cannot accept any arguments. So if this were me, I'd do it like this:

Generalize the "create a new slideshow" code into a single function. All of the settings are basically the same, so all we need to do is tell it which slideshow we want to create (1, 2, or 3... though there's no actual limit on how many we could create this way):

Code JavaScript:

---

// just to help with the image names
function getFilename(slideshow, img) {
    var x = slideshow * img;
    x = x < 10 ? '0' + x : x;
    return ['thumbnails/HP-' + x + '.jpg'];
}
 
function newSlideShow(i) {
    new fadeSlideShow({
        wrapperid: 'fadeshow' + i,
        dimensions: [135, 200],
        imagearray: [
            getFilename(i, 1),
            getFilename(i, 2),
            getFilename(i, 3),
            getFilename(i, 4),
            getFilename(i, 5)
        ],
        displaymode: {type: 'auto', pause: 3000, cycles:0, wraparound: false, randomize: true},
        fadeduration: 1500,
        descreveal: 'none',
        togglerid: ''
    });
}

---

The next step I would take is to just create discrete functions for starting your first, second, and third slideshow (you could actually generalize this into a single function as well, but whatever). That way, you can make sure to start the 2.5 second timer after the slideshow has been created:

Code JavaScript:

---

function startFirst() {
    newSlideShow(1);
    // now we wait 2.5 seconds before starting the second slideshow...
    // note that there are no parentheses after the function name!
    setTimeout(startSecond, 2500);
}
 
function startSecond() {
    newSlideShow(2);
    // now we wait another 2.5 seconds...
    setTimeout(startThird, 2500);
}
 
function startThird() {
    newSlideShow(3);
    // and we're done
}

---

Thank you very much. I am out today, so I will try it this evening.

That looks straightforward enough, although I could not have worked it out for myself. Just doesn't quite work for me yet.

I have created a new file http://www.pfwd.co.uk/~piarti/index-3.php which calls gallery-3.htm which now includes your Javascript. I have put both your bits of code in the gallery-3.htm file. As they are all functions they can presumably sit one after the other in the same file. You will see that the images just don't appear at all now. it seems to me that there is just a set of functions and nothing actually calls the first one, newSlideShow1, and I am not sure how to do that. I also don't see what var mygallery1=new did, and I see you have removed it.

I have also created http://www.pfwd.co.uk/~piarti/index-2.php, which calls gallery-2.htm, which is my variation with the i's removed as I find it easier to follow without them. But that does not work either.

If you have time to have another look I should be very grateful.

As you noticed, the "startFirst" function needs to be called. For readability, I'd put it right at the end of your script block:

Code JavaScript:

---

// after you declare the newSlideShow3 function...
startFirst();

---

But there was another small issue: None of your "start" functions (startFirst, startSecond, startThird) call any functions! Take a look:

Code JavaScript:

---

function startFirst() {
    newSlideShow1; // no parentheses -- BAD
    setTimeout(startSecond, 2500); // no parentheses -- GOOD
}
 
// instead, do this:
 
function startFirst() {
    newSlideShow1(); // has parentheses :D
    setTimeout(startSecond, 2500);
}

---

"newSlideShow1" just refers to the function... "newSlideShow1()" actually executes it.

Adding brackets to call rather than refer to a function is the sort of thing where my Javascript is not what it should be.

I have added the call to startFirst() at the bottom and added the brackets to newSlideShow1() et al, but still I have something wrong. No slideshows are appearing in http://www.pfwd.co.uk/~piarti/index-2.php. Have you time to tell me what is wrong now please?

I have had a quick look at your website. I like the very snazzy buttons for the menu and the site for the American Artists with its 'blinds' drawn over the pictures.

This is just another small issue: You forgot to include the parentheses when you defined newSlideShow1, 2, and 3:

Code JavaScript:

---

function newSlideShow1 { // syntax error!
    // ...
}
 
function newSlideShow1() { // ahh, much better
    // ...
}

---

Off Topic:

Quote:

---

Originally Posted by peleas

I have had a quick look at your website. I like the very snazzy buttons for the menu and the site for the American Artists with its 'blinds' drawn over the pictures.

---

aw shucks :P

I hope your patience will last a little longer. I have added the brackets to my three function newSlideShow1()'s. http://localhost/sites/piai/index-2.php now shows one, but only one, of the slide shows - fadeshow1. The original page, now at www.piarti.org as the site has gone live, shows all three. If I ask for three instances of fadeshow1, rather than one of each, I still get just the one. If I remove it from its normal place and put it elsewhere it shows there. But if I remove it altogether the error message "DIV with ID fadeshow1 not found on page" appears. fadeshow2 does not show instead, even though the link to it is still there. Very mysterious to me.

It looks like the problem this time was just in the newSlideShow1 function:

Code JavaScript:

---

function newSlideShow1() {
 
 var mygallery1=new
 
new	fadeSlideShow({ // <-- second "new"?!
    // ...
} );
}

---

Looks like it was just a typo; take out the second new, and now it should work...

It works!! Just about. Go to http://localhost/sites/piai/index-2.php again and you will see it. I haven't time to make changes at the moment, but I need to see if I can find some way to put a sort of placeholder there for the second and third images. And I need to change the timings to get the changes equally spaced. It could be the customer will like the images gradually appearing. I will tell you when it is perfect for you to admire.

It is done. There are now placeholders of the first image of the second and third slideshows. There is a black phase as the slideshows cut in, but that's too bad. Stretched my CSS positioning skills somewhat.

Thank you very much indeed for your help sdleihssirhc. Is there somewhere I can nominate you as best Sitepoint Addict?