How to delay the start of the slideshow

[undone]

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

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

3) Describe problem: I have two slideshows running simultaneously on the same page. I would like to delay the start of the second slideshow by a couple of seconds in order to have the two shows alternating in sync. I did a search and found a couple of threads where this is addressed, but it appears there were unique circumstances which do not apply to my case. I am simply running the "stock" slideshow as it is listed in the dynamic drive instructions with a couple of tweeks to the fade time. That's it. I don't have a clue what I need to add or subtract to the script in order to delay the start of the second slideshow and would greatly appreciate any help here.

My site: http://www.realsealcoating.com

Many thanks.

[jscheuer1]

If you want them in sync, they should both have the same pause value. Currently you have one at 1500 and the other at 2000:

displaymode: {type:'auto', pause:1500, cycles:0, wraparound:false},

and:

displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false},

Regardless of when they each start, at some point, x times 1500 will equal y times 2000. Think about it (algebra is one of my strong points, but this is pretty simple).

So first set them both to 1500. Next we need a way to delay the second one until some time not evenly divisible by 1500 that also, as a multiple, cannot equal 1500. So numbers like 3000 and 500 would be out. A couple of seconds (2000) would work, as would one second (1000). And we need a little style to keep the layout in order while we wait for the second show to show up.

So try this:

 . . . xt/css" rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="images/favicon.ico" />
<style type="text/css">
#fadeshow2 {
	width: 334px;
	height: 252px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/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">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [334, 252], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/show/showcom01.jpg", "", "", ""],
["images/show/showres01.jpg", "", "", ""],
["images/show/showres02.jpg", "", "", ""],
["images/show/showres03.jpg", "", "", ""],
["images/show/showres04.jpg", "", "", ""],
["images/show/showres06.jpg", "", "", ""],
["images/show/showres05.jpg", "", "", ""]//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:1500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: function(){
	setTimeout(secondShow, 2000);
	}
})
function secondShow(){
	window.mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [334, 252], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
	["images/show/showres07.jpg", "", "", ""],
	["images/show/showcom02.jpg", "", "", ""],
	["images/show/showres08.jpg", "", "", ""],
	["images/show/showres09.jpg", "", "", ""],
	["images/show/showres10.jpg"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:1500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
	});
}
</script>

[undone]

Thanks, jsheuer1! It worked great!

BTW, I had already understood the reasoning behind the pause value and had planned to set both at the same value once the start delay was figured out. The reminder was good, though.

One more question: do you know if there is a way to set a background photo behind fadeshow2? It is currently running in a table, and when I placed a background photo behind it, it didn't show. There is probably a very simple explanation for that, but darned if I know!

[jscheuer1]

I think I know what you are after. However, the slide show itself has a background, as well as two layers (divs) within it that also have background. So, to make a long story short, for what I think you want, do the following -

1. Where we have (add the highlighted):
   
   

   <style type="text/css">
   #fadeshow2 {
   	width: 334px;
   	height: 252px;
   }
   #fadeshow2cover {
   	position: absolute;
   	top: 0;
   	left: 0;
   	width:334px;
   	height: 252px;
   	z-index: 2000;
   	visibility: hidden;
   }
   .gallerylayer {
   	background-color: #4a4c4a!important;
   }
   </style>

2. Then where we have (also add highlighted):
   
   

   function secondShow(){
   	window.mygallery2=new fadeSlideShow({
   	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
   	dimensions: [334, 252], //width/height of gallery in pixels. Should reflect dimensions of largest image
   	imagearray: [
   	["images/show/showres07.jpg", "", "", ""],
   	["images/show/showcom02.jpg", "", "", ""],
   	["images/show/showres08.jpg", "", "", ""],
   	["images/show/showres09.jpg", "", "", ""],
   	["images/show/showres10.jpg"] //<--no trailing comma after very last image element!
   	],
   	displaymode: {type:'auto', pause:1500, cycles:0, wraparound:false},
   	persist: false, //remember last viewed slide and recall within same session?
   	fadeduration: 1500, //transition duration (milliseconds)
   	descreveal: "ondemand",
   	togglerid: "",
   	onslide: function(){
   		document.getElementById('fadeshow2cover').style.display = 'none';
   		this.setting.onslide = function(){return;};
   		}
   	});
   }
   jQuery(function($){
   	$('#fadeshow2cover').css({display: 'none', visibility: 'visible'}).fadeIn(1500);
   });

   Don't miss the added comma (red).
   
   
3. Finally, for your fadeshow2 target division, do like so:
   
   

   <td>
   <div style="position: relative; width:334px; height: 252px;">
   <div id="fadeshow2"></div>
   <div id="fadeshow2cover"><img src="images/show/showres07.jpg" width="334" height="252" alt=""></div>
   </div>
   </td>

[undone]

John,

I never thought to add a style to the fadeshow - clever!

You were right on track with what I was attempting to do and you nailed it except for one thing. The background image for fadeshow2 is getting bumped down after the slideshow2 start delay is over and the slideshow actually starts. See the problem here:

http://realsealcoating.com/index1.html

Your thoughts?

I absolutely appreciate your help!

[jscheuer1]

You changed a bunch of things. You now have the scripts for the slide show twice on the page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/fadeslideshow.js">
<style type="text/css">
#fadeshow2 {
width: 334px;
height: 252px;
}
#fadeshow2cover {
position: absolute;
top: 0;
left: 0;
width:334px;
height: 252px;
z-index: 2000;
visibility: hidden;
}
.gallerylayer {
background-color: #4a4c4a!important;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/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>

It doesn't really matter which you keep and which you get rid of, except that DD TOS requires the credit in the source code. So keep the second and remove the first.

That will fix the jumping. You changed some other things, these do not impact this issue. But here where you now have:

<td ="">
<div style="position: relative; width: 334px; height: 252px;">
<div id="fadeshow2"></div>
<div id="fadeshow2cover"><img src="images/show/showres07.jpg" alt="" height="252" width="334" /></div>
</div>
</td>

Since you moved showres06.jpg from the first show to the second and made it first in the second, and because <td =""> is invalid, it should be like so:

<td>
<div style="position: relative; width: 334px; height: 252px;">
<div id="fadeshow2"></div>
<div id="fadeshow2cover"><img src="images/show/showres06.jpg" alt="" height="252" width="334" /></div>
</div>
</td>

[undone]

Yep, that was it. I obviously did a very sloppy job cutting and pasting your suggested changes. All's well now, though.

Again, many many thanks to you for your assistance!

[avdistribution]

I've staggered the start time of 2 slideshows by just repeating the first slide a few times in one-so they both actually start together, but one of them appears to start after the other.

[jscheuer1]

I've staggered the start time of 2 slideshows by just repeating the first slide a few times in one-so they both actually start together, but one of them appears to start after the other.

But then, if your show repeats, doesn't the 'first' slide take a long time? Do the two shows stay in an alternating pattern, or do they tend to move in and out of sync?

[avdistribution]

I only used it for 1 cycle slideshows-so the 2 shows "appear" to be in sync. With more cycles I assume they would go out of sync.