Delay to multiple slideshows?

**WaltonCreative** · 01-05-2011, 01:17 PM

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

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

3) Describe problem: The script works great BUT I would like the three slides to change with a delay, so the left hand one changes first, then after a second the middle one, then another second delay and then the right.

see: http://www.waltoncreative.com/Slideshow.php

I have set this up with three divs and three versions of the javascript in the <head> tags.

I presume I need to have three versions of the separate javascript, but cannot see anywhere that has a delay to starting the slideshow.

Can you indicate what I need to do to make the middle slideshow start after one second delay, and the right hand slide show start after 2 seconds delay.

Thanks!

**jscheuer1** · 01-05-2011, 02:58 PM

Replace all three of the mygallery=new fadeSlideShow scripts with this single script:

Code:

<script type="text/javascript">
(function(){
	var delay = 1000; // delay between shows
	var mygalleries = [
		{
			wrapperid: "leftSlide", // ID of blank DIV on page to house Slideshow
			dimensions: [200, 300], // width,height of gallery in pixels. Should reflect dimensions of largest image
			imagearray: [   // "source", "URL", "target", "text"
				["http://www.waltoncreative.com/Images/BDFoods/1L.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/2L.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/3L.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/4L.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/5L.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/6L.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/7L.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."] // no comma on last one
			],
			displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
			persist: false, //remember last viewed slide and recall within same session?
			fadeduration: 500, //transition duration (milliseconds)
			descreveal: "ondemand",
			togglerid: ""
		},

		{
			wrapperid: "middleSlide", // ID of blank DIV on page to house Slideshow
			dimensions: [200, 300], // width,height of gallery in pixels. Should reflect dimensions of largest image
			imagearray: [   // "source", "URL", "target", "text"
				["http://www.waltoncreative.com/Images/BDFoods/1M.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/2M.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/3M.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/4M.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/5M.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/6M.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/7M.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."] // no comma on last one
			],
			displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
			persist: false, //remember last viewed slide and recall within same session?
			fadeduration: 500, //transition duration (milliseconds)
			descreveal: "ondemand",
			togglerid: ""
		},

		{
			wrapperid: "rightSlide", // ID of blank DIV on page to house Slideshow
			dimensions: [200, 300], // width,height of gallery in pixels. Should reflect dimensions of largest image
			imagearray: [   // "source", "URL", "target", "text"
				["http://www.waltoncreative.com/Images/BDFoods/1R.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/2R.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/3R.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/4R.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/5R.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/6R.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/7R.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."] // no comma on last one
			],
			displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
			persist: false, //remember last viewed slide and recall within same session?
			fadeduration: 500, //transition duration (milliseconds)
			descreveal: "ondemand",
			togglerid: ""
		}
	], count = 0, gals = [], gc = 0, i;
	for (i = mygalleries.length - 1; i > -1; --i){
		gals.push(mygalleries[i].imagearray[0][0]);
		gals.push(mygalleries[i].imagearray[1][0]);
		if(i < mygalleries.length - 1){
			mygalleries[i].oninit = function(){
				setTimeout(function(){new fadeSlideShow(mygalleries[++gc]);}, delay);
			}
		}
	}
	for (i = gals.length - 1; i > -1; --i){
		jQuery(new Image()).bind('load error', function(){
			count += 0.5;
			if(count === mygalleries.length){
				new fadeSlideShow(mygalleries[0]);
			}
		}).attr('src', gals[i]);
	}
})();
</script>

However, because this script pauses onmouseover, if the user mouses over any of the images, that show will get out of sync. If you want to preserve the mouseover pause (good for descriptions and/or links for the images in the shows), we can arrange for one show pausing as pausing all shows and one show resuming as resuming all shows. But if you don't need links and descriptions, we can just get rid of them and remove the pause. Let me know which works better for you.

**WaltonCreative** · 01-05-2011, 08:30 PM

Great thanks. Will give it a try in the morning.

**WaltonCreative** · 01-05-2011, 09:14 PM

Hi again,

This works a treat thank you. But as you said it is a shame that a mouse over pauses one of the three slideshows, making it out of sync with the other two.

I think it would be great if the mouse-over paused ALL three slideshows then the mouse-out re-started them again.

I tried both removing the content of the rest of the arrays making them into "", plus changing descreveal: "ondemand", to say "none" but neither of these actually stopped the mouse-over action from pausing the shows. How would I delete the mouse-over action so the slideshows continue whatever happens?

It would be great to have BOTH scripts so I could use them for different websites.

Also - what would be really cool would be to have the source URLs not part of the JavaScript, so that the photographs could be dynamically added to the page without having to type them into the script. I presume it is not possible to add a chunk of PHP into the middle of a JavaScript?

Perhaps it would be possible to have the photos in the script as a $variable then refer to them in a separate piece of PHP? <?php echo $variable ?> etc?

**jscheuer1** · 01-05-2011, 10:53 PM

I'd already worked out the no pause version and noticed that, since in your demo all the links are the same and the descriptions (such as they are) aren't necessary, it works out well. Here it is:

Code:

<script type="text/javascript">
(function(){
	var delay = 1000; // delay between shows
	var mygalleries = [
		{
			wrapperid: "leftSlide", // ID of blank DIV on page to house Slideshow
			dimensions: [200, 300], // width,height of gallery in pixels. Should reflect dimensions of largest image
			imagearray: [   // "source", "URL", "target", "text"
				["http://www.waltoncreative.com/Images/BDFoods/1L.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/2L.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/3L.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/4L.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/5L.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/6L.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/7L.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."] // no comma on last one
			],
			displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
			persist: false, //remember last viewed slide and recall within same session?
			fadeduration: 500, //transition duration (milliseconds)
			descreveal: "ondemand",
			togglerid: ""
		},

		{
			wrapperid: "middleSlide", // ID of blank DIV on page to house Slideshow
			dimensions: [200, 300], // width,height of gallery in pixels. Should reflect dimensions of largest image
			imagearray: [   // "source", "URL", "target", "text"
				["http://www.waltoncreative.com/Images/BDFoods/1M.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/2M.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/3M.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/4M.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/5M.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/6M.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/7M.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."] // no comma on last one
			],
			displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
			persist: false, //remember last viewed slide and recall within same session?
			fadeduration: 500, //transition duration (milliseconds)
			descreveal: "ondemand",
			togglerid: ""
		},

		{
			wrapperid: "rightSlide", // ID of blank DIV on page to house Slideshow
			dimensions: [200, 300], // width,height of gallery in pixels. Should reflect dimensions of largest image
			imagearray: [   // "source", "URL", "target", "text"
				["http://www.waltoncreative.com/Images/BDFoods/1R.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/2R.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/3R.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/4R.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/5R.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/6R.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."],
				["http://www.waltoncreative.com/Images/BDFoods/7R.jpg", "http://www.waltoncreative.com/Websites_BD_Foods.php", "_self", "Text."] // no comma on last one
			],
			displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
			persist: false, //remember last viewed slide and recall within same session?
			fadeduration: 500, //transition duration (milliseconds)
			descreveal: "ondemand",
			togglerid: ""
		}
	], count = mygalleries.length, gals = [], i = count - 1;
	function killover(){
		this.setting.$wrapperdiv.unbind('mouseenter mouseleave');
	}
	for (i; i > -1; --i){
		gals.push(mygalleries[i].imagearray[0][0]);
		gals.push(mygalleries[i].imagearray[1][0]);
		if(i < count - 1){
			mygalleries[i].oninit = function(){
				setTimeout(function(){new fadeSlideShow(mygalleries[++count]);}, delay);
				killover.apply(this);
			}
		} else {
			mygalleries[i].oninit = killover;
		}
	}
	for (i = gals.length - 1; i > -1; --i){
		jQuery(new Image()).bind('load error', function(){
			count -= 0.5;
			if(!count){
				new fadeSlideShow(mygalleries[0]);
			}
		}).attr('src', gals[i]);
	}
})();
</script>

Using PHP to fetch the images in a folder is relatively easy. Sorting those images (if required) and supplying appropriate links and/or descriptions for each one can get a bit tricky. That is to say if you are doing more than just showing the images and have different links and/or descriptions for each.

If everything is more or less homogeneous, even the javascript code can be pared down a bit with just the images and wrapperid needing to be specified individually for each show. All of the other specifications, if identical across shows, may be specified in a common object used by all.

**WaltonCreative** · 01-06-2011, 09:45 AM

Great thanks for all your help. Will give it a go when I have some spare time.

**WaltonCreative** · 01-06-2011, 10:02 AM

Just tried it - WORKS PERFECTLY! thanks

Another thought, the delay at the beginning causes the photos to initially APPEAR slowly, which gives the impression that perhaps the page is taking a while to display.

What would be cool would be if they all loaded at once, but the first second and third fades were staggered. So that all three photos always appear.

My ideal solution would be to have a solid chunk of JavaScript that would be the same for every set of slideshows. This could then be required as an external PHP document.

Ideally the variables would then be in one small compact block that I could add PHP to. So for instance variables such as:
Source Folder for Left Pics or via PHP MySQL database
Source Folder for Middle Pics or via PHP MySQL database
Source Folder for right pics or via PHP MySQL database
Delay between middle and right photos starting
On-screen display time for each slide
Fade-in / Fade-out time

The code as it stands is brilliant, but if I want to use it for multiple slideshows on different pages there would be a vast amount of manual work for each one.

Thanks again for all your time!

**jscheuer1** · 01-06-2011, 05:14 PM

Actually the delay doesn't cause that. It's the time it takes for the the first two images in each slideshow to load - a prerequisite to making sure the shows execute with the delay we specify rather than any introduced by the time it takes these initial images to load. Even if you were to set the background images of each of the slideshow divisions to be the same as each of their first images:

Code:

<style type="text/css">
#slideshow { height: 300px; width: 600px; }

#leftSlide, #middleSlide, #rightSlide { float: left; width: 200px; height: 300px; }
#leftSlide, #leftSlide .gallerylayer { background-image: url(http://www.waltoncreative.com/Images/BDFoods/1L.jpg)!important;}
#middleSlide, #middleSlide .gallerylayer { background-image: url(http://www.waltoncreative.com/Images/BDFoods/1M.jpg)!important;}
#rightSlide, #rightSlide .gallerylayer { background-image: url(http://www.waltoncreative.com/Images/BDFoods/1R.jpg)!important;}
</style>

there would be a delay (though nowhere near as much as before) as those images loaded, just as with any image on any web page. It would also in effect cancel the initial fade in for those images. They would be fading in on top of themselves. It's this second part that would be the most disconcerting.

I see you've not gotten the (right click and 'save as'):

loading image from the demo page. Or if you have, it's not on the server or not configured properly to be accessible to the script.

Even if it was, the script is a bit flawed in how it uses that image.

I'd suggest altering your style and markup a bit. It was:

Code:

<style type="text/css">
#slideshow { height: 300px; width: 600px; }

#leftSlide, #middleSlide, #rightSlide { float: left; }
</style>
</head>

<body>
<div id="slideshow">
<div id="leftSlide"></div>
<div id="middleSlide"></div>
<div id="rightSlide"></div>
</div>

I'd use:

Code:

<style type="text/css">
#slideshow { height: 300px; width: 600px; }

.aSlide { float: left; width: 200px; height: 300px; }
.aSlide, .aSlide .gallerylayer {
	background-repeat: no-repeat!important;
	background-position: center!important;
	background-image: url(loading.gif)!important;
}
</style>
</head>

<body>
<div id="slideshow">
<div class="aSlide" id="leftSlide"></div>
<div class="aSlide" id="middleSlide"></div>
<div class="aSlide" id="rightSlide"></div>
</div>

That way the loading image (which could be some other image if you like, perhaps one unique to each slideshow) will show while the slideshows are loading, and will fade to the initial image in each show as they become ready/are cued.

Like maybe even:

Code:

<style type="text/css">
#slideshow { height: 300px; width: 600px; }

.aSlide { float: left; width: 200px; height: 300px; }
.aSlide, .aSlide .gallerylayer {
	background-repeat: no-repeat!important;
	background-position: center!important;
}
#leftSlide, #leftSlide .gallerylayer { background-image: url(http://www.waltoncreative.com/Images/BDFoods/7L.jpg)!important;}
#middleSlide, #middleSlide .gallerylayer { background-image: url(http://www.waltoncreative.com/Images/BDFoods/7M.jpg)!important;}
#rightSlide, #rightSlide .gallerylayer { background-image: url(http://www.waltoncreative.com/Images/BDFoods/7R.jpg)!important;}

</style>

More on some of this other stuff later, I've gotta run.

**Puckspeare** · 05-21-2011, 02:53 PM

I have used the script and it works perfectly except for one thing. When the page loads initially, the galleries start with a black background and fade into the image.

see www.willisayres.net/jbbdesigns/gallerytest.shtml

Ideally the images would load static, then change.

Any ideas?

**jscheuer1** · 05-21-2011, 03:00 PM

See:

http://www.dynamicdrive.com/forums/s...76&postcount=2

The second method, use a separate rule for each slideshow, using it's wrapperid.

Thread: Delay to multiple slideshows?

Thread Tools

Search Thread

Delay to multiple slideshows?

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions