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/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

[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/s...t-on-page-land

and:

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