Question

In a page, I have 4 divs to be made slideshow. Let’s call them divA-divD. Every div has 2 sets of images.

So I use jQuery cycle to turn those divs into slideshows. The catch is, I want to have a sequential slideshow. I’m not sure i can explain it clearly, but it goes like this.

Timeout = 4000 (4 seconds)
divA = 1000 + Timeout (1 second)
divB = 1333 + Timeout
divC = 1666 + Timeout
divD = 2000 + Timeout (2 seconds)

Now my current code for that is

var timeout = 4000;
$('.divA').cycle({
    fx:     'fade',
    speed:  2000,
    timeoutFn: 1000+timeout
});
$('.divB').cycle({
    fx:     'fade',
    speed:  2000,
    timeoutFn: 1333+timeout
});

so on with divC and divD

but the result will be like this

divA = 1000 + 4000 = 5000
divB = 1333 + 4000 = 5333
divC = 1666 + 4000 = 5666
divD = 2000 + 4000 = 6000

That will make the divD will eventually catch up with divA if left too long because :

divA = 5,10,15,20,25,30
divD = 6,12,18,24,30

divD’s fifth slide will be simultaneous with divA sixth slide.

I want the cycle to somehow pause after the divD’s cycle. So it goes like this :

1-4th second : show images
4-5th second : fade divA – divD then pause for 4 more seconds
5-8th second : still pause
9-10th second : another cycle, then pause for 4 more seconds
10-13th second : pause
and so on.

i’ve made the formula but found the difficulty in implementing it

timeout* (index) + (1000* (index-1));

divA = timeout * (index) + (1000 * (index-1))
divB = timeout * (index) + (1000 * (index-1) + 333)
divC = timeout * (index) + (1000 * (index-1) + 666)
divD = timeout * (index) + (1000 * (index-1) + 1000)

where index = the loop of the slides (1,2,3,4,5,…..)

that will make

divA = 4000 * 1 + 1000 * (0) = 4000, 4000 * 2 + 1000 * (1) = 9000, etc
divB = 4000 * 1 + 1000 * (0) + 333 = 4333, 4000 * 2 + 1000 * (1) + 333 = 9333, etc
divC = 4000 * 1 + 1000 * (0) + 666 = 4666, 4000 * 2 + 1000 * (1) + 666 = 9666, etc
divD = 4000 * 1 + 1000 * (0) + 1000 = 5000, 4000 * 2 + 1000 * (1) + 1000 = 10000, etc

the question is, how can i do it in jquery cycle? I’ve tried using timeoutFn and having a callback function like this:

function calculateTimeout(currElement, nextElement, opts, isForward) { 
    var index = opts.currSlide; 

    return timeout * (index) + (1000* (index-1)); 
}

but the index stays 0->1->0->1-> etc. (because I only have two images per div)

I’m sorry if it’s too long or I’m not being clear enough, and thanks in advance for your answers

Answer 1

i found the solution!

http://jsfiddle.net/uygey/4/

or if you feel like reading, read below. it’s somewhat a hack / cheat, but whatever works, i guess 🙂

var index = -1;

$('.divA,.divB,.divC,.divD').cycle({
fx:     'fade',
speed:  2000,
timeoutFn: calculateTimeout
});

function calculateTimeout(currElement, nextElement, opts, isForward) { 
var class = $(currElement).parent().attr('class');
var timeout = 4000;
var wait;
if(class=="divA"){
wait = 0;
}else if(class=="divB"){
wait = 333;    
}else if(class=="divC"){
wait = 666;
}else if(class=="divD"){
wait = 1000;
}

if(class=="divA"){
index++; 
}    

return timeout * (index) + ((1000* (index-1)) + wait); 

}