Not an expert, you’ll have to settle for me.
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):
// 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:
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
}