Ultimate Fade-in slideshow (v2.4) - Stager the timing of multiple fadeshows

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

Hi All,

I am implementing multiple fadeshows on the same page which i have acheived with no issue, but i am wanting to have them staggered so that they are changing at different times.

They would need to display for the same duration but change at different times maybe by adding a delay before each one initialises ?

I have searched the forum and could not find anything to help,


Any help would be appreciated!

Thanks in advance :rolleyes:

Something like (copy and paste into your browser's address bar):

bistrodongiovanni.com/

The code used there:

Code:

---

<script type="text/javascript">

fadeSlideShow.sync = function(){
        fadeSlideShow.sync.gals = fadeSlideShow.sync.gals || [];
        fadeSlideShow.sync.duration = fadeSlideShow.sync.duration || 0;
        fadeSlideShow.sync.gals.push(this);
        fadeSlideShow.sync.duration = Math.max(fadeSlideShow.sync.duration, this.setting.fadeduration);
        if(fadeSlideShow.sync.gals.length !== fadeSlideShow.sync.numGals){return;}
        var thegals = fadeSlideShow.sync.gals;
        fadeSlideShow.sync.duration *= 1.1;

        setTimeout(function(){
                jQuery.each(thegals, function(i, gal){
                        gal.setting.$wrapperdiv.bind('mouseenter mouseleave', function(){gal.setting.ismouseover = false;});
                        setTimeout(
                                function(){
                                        gal.setting.displaymode.type = 'auto';
                                        gal.showslide('next');
                                },
                        gal.setting.displaymode.pause + (gal.setting.displaymode.delay || 0));
                });
        }, fadeSlideShow.sync.duration);
};

fadeSlideShow.sync.numGals = 3; //required - set to number of galleries

var mygallery=new fadeSlideShow({
        wrapperid: "fadeshow1-home", //ID of blank DIV on page to house Slideshow
        dimensions: [327, 310], //width/height of gallery in pixels. Should reflect dimensions of largest image
        imagearray: [
                ["images/slides-home/slide-1a-salad.png", "", "", ""],
                ["images/slides-home/slide-1b-figs.png", "", "", ""],
                ["images/slides-home/slide-1c-pizzachef.png", "", "", ""],
                ["images/slides-home/slide-1d-plumdrink.png"] //<--no trailing comma after very last image element!
        ],
        displaymode: {type:'manual', pause:3500, cycles:0, wraparound:true},
        persist: false, //remember last viewed slide and recall within same session?
        fadeduration: 1750, //transition duration (milliseconds)
        descreveal: "ondemand",
        togglerid: "",
        oninit: fadeSlideShow.sync
})

var mygallery=new fadeSlideShow({
        wrapperid: "fadeshow2-home", //ID of blank DIV on page to house Slideshow
        dimensions: [327, 310], //width/height of gallery in pixels. Should reflect dimensions of largest image
        imagearray: [
                ["images/slides-home/slide-2a-chairs.png", "", "", ""],
                ["images/slides-home/slide-2b-entree.png", "", "", ""],
                ["images/slides-home/slide-2c-art-diners.png", "", "", ""],
                ["images/slides-home/slide-2d-interior-entry.png"] //<--no trailing comma after very last image element!
        ],
        displaymode: {type:'manual', pause:3500, cycles:0, wraparound:true, delay:1750},
        persist: false, //remember last viewed slide and recall within same session?
        fadeduration: 1750, //transition duration (milliseconds)
        descreveal: "ondemand",
        togglerid: "",
        oninit: fadeSlideShow.sync
})

var mygallery=new fadeSlideShow({
        wrapperid: "fadeshow3-home", //ID of blank DIV on page to house Slideshow
        dimensions: [327, 310], //width/height of gallery in pixels. Should reflect dimensions of largest image
        imagearray: [
                ["images/slides-home/slide-3a-sign.png", "", "", ""],
                ["images/slides-home/slide-3b-entrance.png", "", "", ""],
                ["images/slides-home/slide-3c-tiramisu.png", "", "", ""],
                ["images/slides-home/slide-3d-brett-lorraine.png"] //<--no trailing comma after very last image element!
        ],
        displaymode: {type:'manual', pause:3500, cycles:0, wraparound:true, delay:3500},
        persist: false, //remember last viewed slide and recall within same session?
        fadeduration: 1750, //transition duration (milliseconds)
        descreveal: "ondemand",
        togglerid: "",
        oninit: fadeSlideShow.sync
})

</script>

---

see also:

http://www.dynamicdrive.com/forums/s...t-on-page-land

and:

http://www.dynamicdrive.com/forums/s...cond-slideshow