Ultimate Fade-In Slideshow - how to delay start

[ragandboneshop]

1) Script Title: Ultimate Fade-In Slideshow (v2.1)

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

3) Describe problem: On this page, I have a splash screen (in an absolutely positioned DIV) fading out and then revealing the regular page (in a DIV called #container), which is running a slideshow. All's well, except that I'd like for the slideshow to not begin until the #container DIV has appeared. Otherwise, the 1st slide has started before the page is even showing, and the timing of it isn't right. I'm an utter newbie at this and any help would be appreciated.

The page in question: http://ragandboneshop.com/internal/LIAB/

[jscheuer1]

Get rid of this:

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

You only need one copy of jQuery for the page and 1.4.2 is better. And the slide show will run just fine on it.

Also, get rid of:

  <script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [543, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["randoms/pic-2.png", "", "", ""],
		["randoms/pic-1.png", "", "", ""],
		["randoms/pic-3.png", "", "", ""],
		["randoms/pic-5.jpg", "", "", ""],
		["randoms/pic-4.png", "", "", ""],
		["randoms/pic-6.png", "", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 600, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

</script>

We'll use its code elsewhere. Replace this:

<script type="text/javascript">
$(function(){
$('#container').hide();
$('#apDiv1').hide();
$('#apDiv1').fadeIn(2800)
});
$(function(){
   setTimeout(function() {
     $("#apDiv1").fadeOut(2800, function() {
     $("#container").fadeIn();
  });
 }, 3000);
});
</script>

with this:

<script type="text/javascript">
jQuery(function($){
$('#container').hide();
$('#apDiv1').hide();
$('#apDiv1').fadeIn(2800)
   setTimeout(function() {
     $("#apDiv1").fadeOut(2800, function() {
     $("#container").fadeIn();
	var mygallery=new fadeSlideShow({
		wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
		dimensions: [543, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
		imagearray: [
			["randoms/pic-1.png", "", "", ""],
			["randoms/pic-2.png", "", "", ""],
			["randoms/pic-3.png", "", "", ""],
			["randoms/pic-5.jpg", "", "", ""],
			["randoms/pic-4.png", "", "", ""],
			["randoms/pic-6.png", "", "", ""] //<--no trailing comma after very last image element!
		],
		displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
		persist: false, //remember last viewed slide and recall within same session?
		fadeduration: 600, //transition duration (milliseconds)
		descreveal: "ondemand",
		togglerid: ""
	});
  });
 }, 3000);
});
</script>

That's it. I even restored what I imagine to be the desired order of the slides, starting with 1 now instead of 2. Feel free to change that if you like.

[ragandboneshop]

That was incredibly helpful and did the trick. Thank you.

The only undesirable side effect is that when the splash page fades out and the slideshow begins, it fades uup from black, whereas before it was white. I can't figure out what's causing the black.

Revised page is here: http://ragandboneshop.com/internal/LIAB/

Never mind: problem solved. Answer was here: http://www.dynamicdrive.com/forums/s...ad.php?t=48665

Again, many thanks.

[zalia]

Hi there, I would like a different time delay for 6 images so they fade into another image at a different interval from each other.

I used: http://www.dynamicdrive.com/dynamici...nslideshow.htm and the images work fine with the fade but fade at the same time.

What do I need to add to the code to make each image appear with a different time delay?

If it helps this is what I have in the <head> now trying with two images:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

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

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [200, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/hoverover_images/swap_women2.jpg", "http://www.panesarsimone.com/collection_women/index.html", "_self"],
["images/hoverover_images/swap_women1.jpg", "http://www.panesarsimone.com/collection_women/index.html", "_self"],
],
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [200, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/colour_blocks/mustard.gif"],
["images/colour_blocks/ecru.gif"],
],
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>


And this is what I have in the <body>
<div id="fadeshow1"></div>
<div id="fadeshow2"></div>

[jscheuer1]

Hi there, I would like a different time delay for 6 images so they fade into another image at a different interval from each other.

I used: http://www.dynamicdrive.com/dynamici...nslideshow.htm and the images work fine with the fade but fade at the same time.

What do I need to add to the code to make each image appear with a different time delay?

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [200, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/hoverover_images/swap_women2.jpg", "http://www.panesarsimone.com/collection_women/index.html", "_self"],
["images/colour_blocks/mustard.gif"],
["images/hoverover_images/swap_women1.jpg", "http://www.panesarsimone.com/collection_women/index.html", "_self"],
["images/hoverover_images/menswear_swap1.jpg"],
["images/colour_blocks/ecru.gif"],
["images/hoverover_images/menswear_swap2.jpg"] // <-- No comma after last entry!
],
speeds: [1000, 3000, 2000, 4000, 3000, 1500],
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
onslide: function(c, i){
this.setting.displaymode.pause = this.setting.speeds[i];
}
})

Don't miss the added comma (red) after the togglerid entry.


Also, I noticed a couple of things -

1. You have a comma after the last entry in your image array:
   
   

   imagearray: [
   ["images/colour_blocks/mustard.gif"],
   ["images/colour_blocks/ecru.gif"],
   ],

   That will cause an error in some browsers.
   
   
   
2. Your copy of the script at:
   
   http://www.panesarsimone.com/fadeslideshow.js
   
   has become corrupt. It has a reference to the Templates folder throughout. This will cause it not to point to the correct folder for the images or links used with them. Get a fresh copy of the script from the demo page.