How can I get a jquery slideshow plugin that will change multiple divs?

Question

I'm new to jquery, and I have a bit of a problem.

What I need to do is have one div as my main slideshow. That seems straightforward enough.

However, I would like another slideshow div to change next, ( containing a bit of text ).

So the change path would be:

div 1 change, div 2 change, div 1 change ,div 2 change,

And so on.

Where would I begin if I wanted to do this task before the end of the day ( I guess I'm spending the weekend reading about javascript and jquery )?

Answer 1

You might want to check out the jQuery Cycle plugin (options here) and try setting it up with differing delays, but the same speed. This way the animations will begin at different times and although they are not stricly synchronous, they appear to be so because of the offsets.

Answer 2

Using the jQuery Cycle Plugin you can do something like this:

    var slide1 = $('.slideshow1');
    var slide2 = $('.slideshow2');
    slide1.cycle({
        after:function(){
            slide1.cycle('pause');
            slide2.cycle('resume');
        }
    });
    slide2.cycle({
        after:function(){
            slide2.cycle('pause');
            slide1.cycle('resume');
        }
    }).cycle('pause');

Will make sure they always stay in sync even if you pause one of them with a hover or some other way.