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

[enderSFTD]

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

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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:

[jscheuer1]

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

bistrodongiovanni.com/

The code used there:


<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/showthread.php?73078-Ultimate-Fade-in-slideshow-(v2-4)-doesn-t-automatically-start-on-page-land

and:

http://www.dynamicdrive.com/forums/showthread.php?67139-How-to-delay-second-slideshow