Tweak for Ultimate Fade-in Slideshow desired

[endymion]

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

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

3) Describe problem: This script has served me well in the past and I'm grateful to have found it. What I'm looking to do most recently is to, instead of having it cross-fade into the next image, I'd like the image to fade out completely, pause for brief moment, then fade in the next. In other words, a series of images fading in and out, but with a pause in-between. Is this possible with this script, or is there another option out there?

Thanks!

[endymion]

Anyone? Anyone?

I guess I can assume this can't be done with this script. Does anyone know of anything similar that I might use to attain this effect?

[jscheuer1]

Just make up a blank image of the color you want, and make it be every other image in the imagearray. If you only want the blank image to show for a short time - say 500 milliseconds, but you want the other images to show for 3 seconds each, you can make the pause 500, and put each real image in 6 times in a row. So it would be 6 of the same image, one blank, 6 of the next image, one blank, and so on. The only problem would be if you wanted to randomize. That could be worked around by making a customized randomizing function.

[jscheuer1]

I was playing with this a bit more and came up with a front end of sorts that will do those calculations for you. Instead of the on page portion of the script shown on the demo page, do it like so (additions highlighted):

<script type="text/javascript">
fadeSlideShow.makearray = function(cObj){
	var newarray = [], showframes = Math.max(1, Math.round(cObj.showtime/(cObj.gap + cObj.fadeduration)));
	if(cObj.random){
		cObj.images.sort(function(){return 0.5 - Math.random();});
	}
	jQuery.each(cObj.images, function(){
			for (var i = showframes; i > 0; --i){
				newarray.push(this);
			}
			newarray.push([cObj.blank]);
		});
	return newarray;
};

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: fadeSlideShow.makearray({images: [
		["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!
	], showtime: 3000, gap: 250, fadeduration: 500, blank: 'trans.png', random: true}),
	displaymode: {type:'auto', pause:250, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
});

</script>

Notes:

• showtime: how long you want each of your actual images displayed.
• gap: how long you want the blank image to show between each actual image, set the displaymode pause: to this same number.
• fadeduration: the duration of the fade, set this the same as the displaymode fadeduration: number.
• blank: path to your blank image, can be a small transparent image, or a solid color image of the same dimensions as the slideshow.
• random: should the images be randomized? (true/false), set this here. In the original call (the var mygallery = new fadeSlideShow part), always use false for its displaymode randomize: or leave that property off.

If you have more than one slideshow on the page, you only need the fadeSlideShow.makearray function once, it may be used by all of the shows on a page.

[endymion]

Many thanks for rocking this out. Works like a charm. Should add it to the script page for an extra option.

Just made a donation to the IRC to show my thanks!