fade-in slideshow settings

[mattmac]

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

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

3) Describe problem: Apologies if this has been asked before.

Is it possible to have various fade durations between images in one slideshow.

What I would like to achieve is -
4 sec fade from image 1 to image 2
.5 sec fade from image 2 to image 3
4 sec fade from image 3 to image 4
.5 sec fade from image 4 to image 5
4 sec fade from image 5 to image 6

Alternatively is it possible to run this as 3 separate slideshows that load one after the other.

I suspect that this is more a job for Flash but I would really like to resolve this with good old html and javascript.

Thanks

[ddadmin]

To give each slide a custom fade duration, try the below modified .js file. Find the line in red, and change those values to your own:

setting.myfadeduration=[1000,5000,1000,5000,4000]

Where 1000 is 1 second for the 1st slide, 5000 is 5 seconds for the 2nd etc. Slides missing a custom duration will default to the original fade duration.

[mattmac]

Thanks for the advice and help, it was spot on.

Another question for you.

Is it possible to have two separate slideshows on the same page, each one accessing a different ''fadeslishow.js' file with different fade durations for each slideshow.

Thanks again in advance.

[ddadmin]

Inside the modified .js file, try commenting out the below line (extra code in red):

//setting.myfadeduration=[1000,5000,1000,5000,4000]

With it, you can now specify independent fade durations for each instance of the slideshow on your page, by doing so inside your initialization code. For example:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	myfadeduration: [1000,5000,1000,5000,4000],
	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://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: ""
})


var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	myfadeduration: [2000,3000,5000,1000,8000],
	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://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:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler"
})

[mattmac]

Thanks once again, so simple when you know how.

Is it possible to get the initial slide to preload rather that fade in.

Also when the first slide fades in there is a black background before the image loads, is it possible to change to a white background.

I have got two slideshows side by side (before and after photos) on the same page and what I would like to do is have one slideshow start 2 seconds after the first one so that each slideshow then changes alternatively as opposed to changing together.

[ddadmin]

Is it possible to get the initial slide to preload rather that fade in.

If you set the fade duration for the 1st image to 0, that should effectively cause the first image to appear instantly instead of fade in.

Also when the first slide fades in there is a black background before the image loads, is it possible to change to a white background.

This question has been answered a few times already, please do a search. ie: http://www.dynamicdrive.com/forums/s...ad.php?t=48665

[mattmac]

The background colour problem is solved. I don't suppose it is possible to replace the background colour with a url for an image?

Changing the fade duration for the first slide to '0' works as a preload and also makes the two slideshows change/fade alternatively. The problem now is that once the slideshow has run its first cycle it does a quick '0' jump back to the first slide instead of a smooth '2000' fade.

[tomkorver]

Any solution for this?
It seems such an obvious feature to simply start the slideshow with an image fully loaded...

[jscheuer1]

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	myfadeduration: [0,3000,5000,1000,8000],
	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://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:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler",
	onslide: function(){
		this.setting.myfadeduration[0] = 2000;
		this.setting.onslide = function(){return;};
	}
})

Don't miss the added comma (red) after the togglerid property. In the above 0 will be the value the first time, 2000 for each subsequent time. If persistence is used, and the show starts with other than the first slide, there will be no problem, except that the slide that does start will fade in at its configured rate.