How to delay second slideshow

**luudp** · 01-26-2012, 04:35 PM

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

http://www.dynamicdrive.com/dynamici...nslideshow.htm

Hi,
On one and the same page I use 2 slideshows. Now I would like to delay the second slideshow so the slideshows alternate nicely. Any suggestions on how to realise this?

Many thanks,
Luud

**jscheuer1** · 01-27-2012, 03:30 PM

Add the highlighted code to the beginning of the new fadeSlideShow section, example (add it only once, if you have two separate sections for this add it only to the first section):

Code:

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

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

	function over(e){
		var id = this.id, typeBool = e.type === 'mouseenter', showHide = typeBool? 'show' : 'hide';
		jQuery.each(thegals, function(i, gal){
			if(gal.setting.wrapperid !== id){
				gal.setting.ismouseover = typeBool;
				if(gal.setting.descreveal === 'ondemand'){gal.showhidedescpanel(showHide);}
			}
		});
	}

	setTimeout(function(){
		jQuery.each(thegals, function(i, gal){
			gal.setting.$wrapperdiv.bind('mouseenter mouseleave', over);
			gal.setting.playtimer = 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 = 2; //required - set to number of galleries

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [550, 460], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["sunflower.jpeg", "", "", "Not . . .

Then, in one and only one of your two new fadeSlideShow calls add a delay to the displaymode, example:

Code:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [550, 460], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["sunflower.jpeg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["flip-flops.jpeg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["rubber-ring.jpeg"],
		["sand-castle.jpeg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true, delay:1250},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "",
	oninit: fadeSlideShow.sync
})

Also add the oninit call as shown, but do that with both of them. Don't miss the added comma after the togglerid value.

Notice also that the displaymode type is 'manual', they should both be set that way, and ideally they should both have the same pause and fadeduration. The cycles should be 0 or at least the same between the two of them. And the wraparaound should be true for both as well.

The added delay that you use would then ideally be half of the pause.

If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.

**luudp** · 01-27-2012, 04:22 PM

Many thanks John. Works just fine now.

**katebellami** · 05-30-2012, 12:12 PM

Hi - I am actually combining this with another very helpful function you provided yesterday which tells the slideshow to stop on the last image. How do I marry the two?

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;

	function over(e){
		var id = this.id, typeBool = e.type === 'mouseenter', showHide = typeBool? 'show' : 'hide';
		jQuery.each(thegals, function(i, gal){
			if(gal.setting.wrapperid !== id){
				gal.setting.ismouseover = typeBool;
				if(gal.setting.descreveal === 'ondemand'){gal.showhidedescpanel(showHide);}
			}
		});
	}

	setTimeout(function(){
		jQuery.each(thegals, function(i, gal){
			gal.setting.$wrapperdiv.bind('mouseenter mouseleave', over);
			gal.setting.playtimer = 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 = 2; //required - set to number of galleries



var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [760, 185], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/slide-1.png", "", "", ""],
		["images/slide-2.png", "", "", ""],
		["images/slide-3.png", "", "", ""],
		["images/slide-4.png", "", "", ""],
		["images/slide-5.png", "", "", ""],
		["images/slide-6.png", "", "", ""],
		["images/slide-7.png", "", "", ""],
		["images/slide-8.png", "", "", ""]
	],
	displaymode: {type:'auto', pause:800, cycles:1, wraparound:false, delay:1250},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 400, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "",
	oninit: function(){
		--this.setting.totalsteps;
	}

})


</script>

**jscheuer1** · 05-30-2012, 02:13 PM

Follow the same instructions in this thread, except for the oninit. It should look like so for both slideshows:

Code:

	oninit: function(){
		--this.setting.totalsteps;
		fadeSlideShow.sync.call(this);
	}

**katebellami** · 05-30-2012, 05:55 PM

Thanks! It actually doesnt seem to be working. I only have 1 slideshow, so I changed it to 1 in the number area.

Code:

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

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

	function over(e){
		var id = this.id, typeBool = e.type === 'mouseenter', showHide = typeBool? 'show' : 'hide';
		jQuery.each(thegals, function(i, gal){
			if(gal.setting.wrapperid !== id){
				gal.setting.ismouseover = typeBool;
				if(gal.setting.descreveal === 'ondemand'){gal.showhidedescpanel(showHide);}
			}
		});
	}

	setTimeout(function(){
		jQuery.each(thegals, function(i, gal){
			gal.setting.$wrapperdiv.bind('mouseenter mouseleave', over);
			gal.setting.playtimer = 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 = 1; //required - set to number of galleries



var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [760, 185], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/slide-1.png", "", "", ""],
		["images/slide-2.png", "", "", ""],
		["images/slide-3.png", "", "", ""],
		["images/slide-4.png", "", "", ""],
		["images/slide-5.png", "", "", ""],
		["images/slide-6.png", "", "", ""],
		["images/slide-7.png", "", "", ""],
		["images/slide-8.png", "", "", ""]
	],
	displaymode: {type:'auto', pause:800, cycles:1, wraparound:false, delay:1250},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 400, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "",
	oninit: function(){
		--this.setting.totalsteps;
		fadeSlideShow.sync.call(this);
	}

})


</script>

**jscheuer1** · 05-30-2012, 11:28 PM

There could also be other problems but you have to set the displaymode type to manual:

Code:

displaymode: {type:'manual', pause:800, cycles:1, wraparound:false, delay:1250},

Not (as you have it):

Code:

displaymode: {type:'auto', pause:800, cycles:1, wraparound:false, delay:1250},

But with only one show, there's no reason to use the fadeSlideShow.sync code. Get rid of it and change the the init back to:

Code:

	oninit: function(){
		--this.setting.totalsteps;
	}

However, I just tried this out to be sure and it works. If all you're going for an initial delay, that's what happens. If there's some other problem, and/or you want more help:

Please include a link to the page on your site that contains the problematic code so we can check it out.

**katebellami** · 05-31-2012, 12:50 AM

thanks! there is only one slideshow, and I would like it to cycle once, but I would like a slight delay before playing. Here is the link to the site. thank you!!
http://www.be-eventproductions.com/temp/

**jscheuer1** · 05-31-2012, 05:54 AM

Originally Posted by jscheuer1

Notice also that the displaymode type is 'manual', they should both be set that way, and ideally they should both have the same pause and fadeduration. The cycles should be 0 or at least the same between the two of them. And the wraparaound should be true for both as well.

I don't see the changes to the displaymode line as recommended (see above quote) in this thread. And of course you have to add the fadeSlideShow.sync.call(this); to the oninit From what the page is/was when I looked at it, change:

Code:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [760, 190], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/slide-1.png", "", "", ""],
		["images/slide-2.png", "", "", ""],
		["images/slide-3.png", "", "", ""],
		["images/slide-4.png", "", "", ""],
		["images/slide-5.png", "", "", ""],
		["images/slide-6.png", "", "", ""],
		["images/slide-7.png", "", "", ""],
		["images/slide-8.png", "", "", ""]
	],
	displaymode: {type:'auto', pause:800, cycles:1, wraparound:false, delay:1250},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 400, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "",
	oninit: function(){
		--this.setting.totalsteps;
	}

})

to:

Code:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [760, 190], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/slide-1.png", "", "", ""],
		["images/slide-2.png", "", "", ""],
		["images/slide-3.png", "", "", ""],
		["images/slide-4.png", "", "", ""],
		["images/slide-5.png", "", "", ""],
		["images/slide-6.png", "", "", ""],
		["images/slide-7.png", "", "", ""],
		["images/slide-8.png", "", "", ""]
	],
	displaymode: {type:'manual', pause:800, cycles:1, wraparound:true, delay:1250},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 400, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "",
	oninit: function(){
		--this.setting.totalsteps;
		fadeSlideShow.sync.call(this);
	}

})

**katebellami** · 05-31-2012, 11:52 AM

thanks! Unfortunately that actually delays the 2nd slide. So the first slide appears right away, then there is a long pause between the first and second slides. I posted the updated page at the same link.

Thread: How to delay second slideshow

Thread Tools

Search Thread

How to delay second slideshow

Bookmarks

Bookmarks

Posting Permissions