Question

I’ve asked about this before but didn’t really get anywhere.

I need to have three images displaying on a page, each of them looping through a set, but timed 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 here is a simple setup, but this doesn’t have the time off-set.

<div id="header-img-1">
<img src="http://medienfreunde.com/lab/innerfade/images/ggbg.gif" width="318" height="110" />
<img src="http://medienfreunde.com/lab/innerfade/images/whizzkids.gif" width="318" height="110" />
</div>

<div id="header-img-2">
<img src="http://medienfreunde.com/lab/innerfade/images/km.jpg" width="318" height="110" />
<img src="http://medienfreunde.com/lab/innerfade/images/tuev.jpg" width="318" height="110" />
</div>

<div id="header-img-3">
<img src="http://medienfreunde.com/lab/innerfade/images/rt_arch.jpg" width="318" height="110" />
<img src="http://medienfreunde.com/lab/innerfade/images/whizzkids.gif" width="318" height="110" />
</div>

.

$(document).ready(

function() {
$('#header-img-1').innerfade2({
    animationtype: 'fade',
    speed: 750,
    timeout: 6000,
    type: 'sequence',
    containerheight: '1em'
});

$('#header-img-2').innerfade2({
    animationtype: 'fade',
    speed: 750,
    timeout: 6000,
    type: 'sequence',
    containerheight: '1em'
});

$('#header-img-3').innerfade2({
    animationtype: 'fade',
    speed: 750,
    timeout: 6000,
    type: 'random_start',
    containerheight: '1em'
});
});​

http://jsfiddle.net/spirelli/gFveN/

So #header-img-1 needs to fade 2 secs after page load, #header-img-2 adter 4 secs, and #header-img-3 after 6 secs, all of them fading every 6 seconds.

I’m not very Javascript literate, so I’m hoping for a kind soul to help me out with the correct code. Thank you!

Answer 1

The API-Description allows to add a parameter startDelay:

startDelay: Time before the first slide change (Default: '0')

so

$('#header-img-1').innerfade2({
    animationtype: 'fade',
    speed: 750,
    timeout: 6000,
    startDelay:2000,   // declare your initial delays here
    type: 'sequence',
    containerheight: '1em'
});

will do the trick.

EDIT: your initial version was too old, use the version i provided in the link above. See it working in your modified example. Beware the different naming of the function – innerfade2 vs innerFade.