Ultimate Fade-in slideshow (v2.1) - 1st image no fade in

**tomkorver** · 11-22-2009, 04:21 PM

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

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

3) Describe problem:

The slideshow starts with a black background, I dont want this.

I'd like to start the slideshow with an image 100% loaded so the first image should not fade in, after this the transition should start.

Another solution to my problem would be that the slideshow starts with a transparent background (so it seems it starts fading from div background to first image).

Anyone knows how to change the code?
(sorry I have little to none js skills that's why I ask here)
Thanks!

**tomkorver** · 11-22-2009, 05:13 PM

I just red this thread:

http://www.dynamicdrive.com/forums/s...ad.php?t=50152

I followed the instructions as posted by jscheuer1.

What happpens now is that it starts exactly as I want, but now every transition starts with opacity: 0, but I'd like to keep the transitions as they were.

So it seems I came a little closer, but not there yet!

**jscheuer1** · 11-22-2009, 06:08 PM

I'm not real clear on what you are going for, but instead of following the instructions in that thread to the letter, do the other stuff recommended there, but change this line in in the script:

Code:

setting.$gallerylayers.eq(setting.fglayer).css({zIndex:999}) //foreground layer becomes background

to:

Code:

setting.$gallerylayers.eq(setting.fglayer).css({zIndex: 999}).stop().animate({opacity: 0}, setting.fadeduration); //foreground layer becomes background

I also setup another approach to what I think you are after that requires no changes to the styles or script. I can't find it at the moment, but we put an absolutely positioned div over the slide show and put an image in that. Using the undocumented onslide property of the show, made this added division go away after the first slide had fully faded in:

Code:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [470, 502], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["http://stickmanlabs.com/images/kevin_vegas.jpg"],
		["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, 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(){
		document.getElementById('coverDiv').style.display = 'none';
		this.setting.onslide = function(){};
	}
})

Don't miss the added comma after the togglerid: "" property. The markup could then be something like:

Code:

<div style="position:relative;width:470px;height:502px"> <-- Same Dimensions as the show -->
<div id="fadeshow1"></div>
<div id="coverDiv" style="position:absolute;z-index:1002"><img src="myImage.jpg" alt=""></div>
</div>

You may have to add top and left style properties to the coverDiv to get the image to appear just where you want it to. Some other minor tweaks may be required.