Help with multiple slideshows on the page

Hello, I need to have three images displaying on a page, each of them looping through a set, but in sequence. This means that when the page loads three images display, after 2 seconds the first one changes, after a further 2 secs the second one, then the third, an then it would repeat endlessly.

I’ve used innerfade.js and ave some code that delays initially delays each slideshow by 2 secs so that they change in sequence. However, at the beginning not all three images display, but one appears after the other.

Please see http://jsfiddle.net/xXSb5/1/

I need some help now in making this works. Much appreciated!

You’re wanting the innerfade2 plugin to show a random sequence, but you don’t want to wait for the staggered starting time to occur before the first image is shown.

I see that you have already made some changes to the plugin, so if you want to maintain the random sequence under the control of the plugin a possible solution is to add to the innerfade2 plugin a new setting to freeze the start for a certain period of time. An option called freezeStart could be a useful name for that new option.

Thank you for your reply, John. None of the customisation to innerfade was mine. Someone else made an improvement here: http://computeraxe.com/jquery-stop-action-improves-innerfade-plugin

In fact, I’m just not very Javascript literate and think I need some kind soul to help me out with the correct code. Maybe this is a better starting point: http://jsfiddle.net/spirelli/gFveN/

What needs to change though is that the transition of the first slide show should happen after 2 seconds, the 2nd after 4 seconds and the 3rd after 6 seconds (with all of them changing every 6 seconds, but offset by 2 secs).

Thank you.

With a sequential series of images that’s fairly straight forward. We can just use setTimeout to delay the other slideshows by 2 and 4 seconds:


...
setTimeout(function () {
    $('#header-img-2').innerfade2({
        ...
    });
}, 2000);
setTimeout(function () {
    $('#header-img-3').innerfade2({
        ...
    });
}, 4000);

We can also use a bit of CSS to help remove the extra images and tidy up the container height before the slideshow begins.


#header-img-1 img+img, #header-img-2 img+img, #header-img-3 img+img {
    display: none;
}
#header-img-1, #header-img-2, #header-img-3 {
    height: 1em;
}

You can see this in action at http://jsfiddle.net/pmw57/gFveN/3/

Thank you very much for your time Paul. That’s been very helpful. All the best!

I’ve got a follow-up question on this one. As it stands you have to wait for 6 seconds for the first animation to show.

Is there a way to modify this so that the whole thing starts after 2 seconds?

We come back now to a similar situation that we started with, where customizing the plugin is wanted to provide a custom delay after the first image.