Ultimate Fade-In Slideshow transition options...

[rmastal]

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

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

3) Describe problem: This is more of a question versus a problem... I'm wondering If I can have images fade to black and then to the next image versus having it go from image to image... Also; if not i realize I can just load a solid black image in between each image file; but can I then control the timing of how long that appears; or does each image need in the array have the same timing?

Thanks!

[jscheuer1]

Easiest way would be to make every other image a small transparent .gif. It will be centered, and the black background will show through. As for the timing variation, that can be accomplished via the oninit and onslide events, example:

<script type="text/javascript">

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
	imagearray: [
			["transparent_1px.gif"],
			["http://i26.tinypic.com/11l7ls0.jpg", "#what", "", "<a style='color: #fff;' href='http://www.google.com/'>Nothing</a> beats relaxing next to the pool when the weather is hot."],
			["transparent_1px.gif"],
			["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
			["transparent_1px.gif"],
			["http://i30.tinypic.com/531q3n.jpg"],
			["transparent_1px.gif"],
			["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:4000, blackpause:500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: /apple|google/i.test(navigator.vendor)? "always" : "ondemand",
	togglerid: "",
	oninit: function(){
		var d = this.setting.displaymode;
		d.npause = d.pause;
	},
	onslide: function(){
		var d = this.setting.displaymode;
		d.pause = d.pause === d.npause? d.blackpause : d.npause;
	}
})

</script>

Don't miss the added comma (red) after the togglerid value and configure the new displaymode property blackpause (also red) as desired. It should probably be at least as long as the fadeduration.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[rmastal]

That's brilliant... thank you! I had a feeling it had to do with the oninit function.

[rmastal]

I have a follow up to this; it seems to be along the same lines.

My slideshow has 23 images in it; and I want to speed up the transition of image 18 and 19... would I need to just write out the cadence using the onslide function?

onslide: function(){
var d = this.setting.displaymode;
d.pause = d.pause === d.npause? d.blackpause : d.npause;

so instead of having what's above; take it through all the images? Or can I somehow target a specific image to speed up it's transition?

[rmastal]

This is the code I'm using currently WITHOUT targeting those images:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeslideshow", //ID of blank DIV on page to house Slideshow
	dimensions: [1008, 612], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/transparent_1px.gif"],
		["images/portfolio_1.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_2.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_3.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_4.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_5.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_6.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_7.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_8.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_9.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_10.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_11.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_12.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_13.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_14.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_15.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_16.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_17.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_18.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_19.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_20.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_21.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_22.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_23.jpg", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:4500, blackpause:500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "",
	oninit: function(){
		var d = this.setting.displaymode;
		d.npause = d.pause;
	},
	onslide: function(){
		var d = this.setting.displaymode;
		d.pause = d.pause === d.npause? d.blackpause : d.npause;
	}
})




</script>

[jscheuer1]

OK, because of the added blank images the first image, which would have been index 0 is now 1 (0 + 1 + 0). All of the images are increased by 1 + whatever their original slot would have been, so the second image that would have been index 1 is now 3 (1 + 1 + 1), the third which would have been 2 is now 5 (2 + 1 + 2) and so on. But the way you're numbering the images isn't 0 based, it starts at 1, as long as you continue to do that we can arrive at your number by adding 1 to the actual 0 based index and dividing by 2. In javascript that's:

(index + 1) /2

Here's what to do, change the the onslide function to:

	onslide: function(fglayer, index){
		var d = this.setting.displaymode;
		d.pause = d[(index + 1) /2] || (index % 2? d.npause : d.blackpause);
	}

Which checks to see if an indexed pause is set, if not sets the pause on the basis of the index being even or odd. Now you can configure individual pauses by the numbers you're using in the displaymode property. So putting it all together:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeslideshow", //ID of blank DIV on page to house Slideshow
	dimensions: [1008, 612], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/transparent_1px.gif"],
		["images/portfolio_1.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_2.jpg", "", ""],
		["images/transparent_ . . .

		. . . s/portfolio_21.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_22.jpg", "", ""],
		["images/transparent_1px.gif"],
		["images/portfolio_23.jpg", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:4500, blackpause:500, 18:2000, 19:1500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "",
	oninit: function(){
		var d = this.setting.displaymode;
		d.npause = d.pause;
	},
	onslide: function(fglayer, index){
		var d = this.setting.displaymode;
		d.pause = d[(index + 1) /2] || (index % 2? d.npause : d.blackpause);
	}
})

I was playing around with this a bit more and found we can use a function to set up the imagearray so we don't need all those ["images/transparent_1px.gif"] entries:

<script type="text/javascript">
fadeSlideShow.ims = function(ims){
		for (var i = ims.length; i > 0; --i){
			ims.splice(i - 1, 0, ["images/transparent_1px.gif"]);
		}
		return ims;
};

var mygallery=new fadeSlideShow({
	wrapperid: "fadeslideshow", //ID of blank DIV on page to house Slideshow
	dimensions: [1008, 612], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: fadeSlideShow.ims([
		["images/portfolio_1.jpg", "", ""],
		["images/portfolio_2.jpg", "", ""],
		["images/portfolio_3.jpg", "", ""],
		["images/portfolio_4.jpg", "", ""],
		["images/portfolio_5.jpg", "", ""],
		["images/portfolio_6.jpg", "", ""],
		["images/portfolio_7.jpg", "", ""],
		["images/portfolio_8.jpg", "", ""],
		["images/portfolio_9.jpg", "", ""],
		["images/portfolio_10.jpg", "", ""],
		["images/portfolio_11.jpg", "", ""],
		["images/portfolio_12.jpg", "", ""],
		["images/portfolio_13.jpg", "", ""],
		["images/portfolio_14.jpg", "", ""],
		["images/portfolio_15.jpg", "", ""],
		["images/portfolio_16.jpg", "", ""],
		["images/portfolio_17.jpg", "", ""],
		["images/portfolio_18.jpg", "", ""],
		["images/portfolio_19.jpg", "", ""],
		["images/portfolio_20.jpg", "", ""],
		["images/portfolio_21.jpg", "", ""],
		["images/portfolio_22.jpg", "", ""],
		["images/portfolio_23.jpg", "", ""] //<--no trailing comma after very last image element!
	]),
	displaymode: {type:'auto', pause:4500, blackpause:500, 18:2000, 19:1500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "",
	oninit: function(){
		var d = this.setting.displaymode;
		d.npause = d.pause;
	},
	onslide: function(fglayer, index){
		var d = this.setting.displaymode;
		d.pause = d[(index + 1) /2] || (index % 2? d.npause : d.blackpause);
	}
})

</script>