How to delay second slideshow

[jscheuer1]

Well, that's what the sync code does. If you want no slides at first, you don't want this code. You want a timeout for the entire slideshow.

For that -

To reserve space for the slideshow, put this in your stylesheet:

#fadeshow1 {width: 760px; height: 190px;}

And replace all of this:

<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, 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);
	}

})


</script>

With:

<script type="text/javascript">
setTimeout(function(){
	window.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},
		persist: false, //remember last viewed slide and recall within same session?
		fadeduration: 400, //transition duration (milliseconds)
		descreveal: "ondemand",
		togglerid: "",
		oninit: function(){
			--this.setting.totalsteps;
		}
	
	});
}, 1250);
</script>

Notice the red 1250 at the end there? That's the number of milliseconds delay for the show. You might want it to be like 2500 for a more dramatic effect.

[katebellami]

Thanks! I think it is still slightly off. It looks like the first slide is now 'blinking' at the begining of the script. It shows up and then 'blinks' and then the rest of the slideshow plays out.

http://www.be-eventproductions.com/temp/index2.html

[jscheuer1]

There's garbage from a poor job of cut and paste (most likely) or left over somehow from before, or I cannot be certain how it got there. But in the page's source code there's this:

<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, 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);
	}

})


</script>With:


Code:

That doesn't belong. Get rid of it.

[katebellami]

thank you! i have been working on this site on little sleep and am going crosseyed at this point!