Ultimate Fade-in slideshow (v2.4) begin on mouseclick/mouseover

[nmdiego]

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 slideshow is fantastic and I have used it many times before. However now I wanted to add it to a custom Facebook page that I am developing. Due to the terms and conditions of FB, you cannot have media begin playing automatically. I am currently using the slideshow in "auto" mode and really prefer this over "manual" mode. I was wondering is there is an easy way to have the slideshow paused on pageload, then begin as soon as someone rolls their mouse over it or as soon as they click on the slideshow.

Thanks in advance, I understand this is a strange question.

[jscheuer1]

Either can be done. But if your first image is linked, a click would be a poor choice.

That said, click to start:

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: [
			["http://i26.tinypic.com/11l7ls0.jpg"],
			["http://i29.tinypic.com/xp3hns.jpg"]
		],
	displaymode: {type:'manual', pause:4000, cycles:0, wraparound:true},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "never",
	togglerid: "",
	oninit: function(){
		var slideshow = this;
		this.setting.$wrapperdiv.click(function(){
			slideshow.setting.displaymode.type = 'auto';
			slideshow.setting.ismouseover = false;
			slideshow.showslide('next');
			slideshow.setting.$wrapperdiv.unbind('click').attr('title', '').css({cursor: ''});
		}).css({cursor: 'pointer'}).attr('title', 'Click to Start');
	}
})

For mouseover start:

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: [
			["http://i26.tinypic.com/11l7ls0.jpg"],
			["http://i29.tinypic.com/xp3hns.jpg"]
		],
	displaymode: {type:'manual', pause:4000, cycles:0, wraparound:true},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "never",
	togglerid: "",
	oninit: function(){
		var slideshow = this;
		this.setting.$wrapperdiv.bind('mouseenter.start', function(){
			slideshow.setting.displaymode.type = 'auto';
			slideshow.setting.ismouseover = false;
			slideshow.showslide('next');
			slideshow.setting.$wrapperdiv.unbind('mouseenter.start');
		});
	}
})

Regardless of the one you choose, don't miss the added comma (red) after the togglerid value.

For other options like a play/pause button, individual buttons for slides, etc. See:

http://www.dynamicdrive.com/forums/blog.php?b=248

[nmdiego]

Thank you so much John. This was immensely helpful and exactly what I wanted. However upon implementation I came up with another question for you if your willing.

Whether I go with onclick or mouseover start, I was hoping to have an image that would prompt the user to either click or roll their mouse over. So in other words this would be the first image in the imagearray. However I don't want that image to appear again when the slideshow cycles. So is there a way to skip over the first image of array when the slideshow cycles.

Either way, thank you again for your help.

[jscheuer1]

For either method, add these stylesheets (one ordinary one, one conditional for IE 6) to the head of the page:

<style type="text/css">
div.startshow {
	width: 100%;
	height: 100%;
	background: transparent url(play.png) center no-repeat;
	position: relative;
	z-index: 1003;
	opacity: 0.5;
	cursor: pointer;
}
</style>
<!--[if IE 8|lt IE 7]>
<style type="text/css">
table.startshow {
	width: 100%;
	height: 100%;
	background: transparent url(not_a.gif);
	position: relative;
	z-index: 1003;
	cursor: pointer;
}
.startshow td {
	width: 100%;
	height: 100%;
	vertical-align: middle;
}
.startshow td div {
	zoom: 1;
	margin: auto;
}
</style>
<![endif]-->

If you're doing mouseover, you don't need cursor: pointer; (two places, highlighted in the above), and should probably get rid of them as they might leave ghost cursors in some browsers when using the mouseover code.

Opacity for the play image is set one place, red in the above. It will be translated for IE 8. IE 9 respects it as is, as do all other browsers, except IE 7 and less which just can't do it in this situation. For them the image will be full opacity, but at least, since it's an alpha .png, you still see the image behind it, the effect just isn't as dramatic.

You will need a play.png image. Get your own or use this (put it in the same folder as your page):

Attachment 4386

It's referenced only once and only in the css we just added (near the top, green). It's an ordinary background image. I chose an alpha opacity .png image because it lets you see the first image behind it.

The oninit for click:

	oninit: function(){
		var slideshow = this, $startdiv = this.setting.$wrapperdiv.append('<div class="startshow"></div>').find('.startshow')
		.attr('title', 'Click to Start'), ver;
		function clickfunc(){
			slideshow.setting.displaymode.type = 'auto';
			$startdiv.css({cursor: 'default'}).hide();
			setTimeout(function(){
				slideshow.setting.ismouseover = false;
				slideshow.showslide('next');
			}, 100);
		}
		
		/*@cc_on @*/
		/*@if(@_jscript_version >= 5)
			ver = jQuery.browser.version; var op, im, w, h;
			if(ver < 7 || ver == 8){
				var alphaSrc = $startdiv.css('backgroundImage').replace(/.*\(['"]?|['"]?\)/g, '');
				if(ver == 8){
					op = $startdiv.get(0).currentStyle['opacity'];
					im = new Image();
					im.onload = im.onerror = function(){
						w = im.width || 0;
						h = im.height || 0;
						makeAlpha();
					};
					im.src = alphaSrc;
				}
				function makeAlpha(){
					$startdiv.replaceWith('<table class="startshow" title="' + $startdiv.attr('title') +
					'"><tr><td><div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' +
					alphaSrc + '\');"></div></td></tr></table>');
					$startdiv = slideshow.setting.$wrapperdiv.find('.startshow');
					if(ver == 8){$startdiv.css({opacity: op}).click(clickfunc).find('div').css({width: w, height: h});}
				}
				if(ver < 7){makeAlpha();}
			}
		@end @*/
		if(ver != 8){$startdiv.click(clickfunc);}
	}

The oninit for mouseover:

	oninit: function(){
		var slideshow = this, $startdiv = this.setting.$wrapperdiv.append('<div class="startshow"></div>')
		.find('.startshow'), ver;
		function enterfunc(){
			slideshow.setting.displaymode.type = 'auto';
			$startdiv.hide();
			setTimeout(function(){
				slideshow.setting.ismouseover = false;
				slideshow.showslide('next');
			}, 100);
		}
		
		/*@cc_on @*/
		/*@if(@_jscript_version >= 5)
			ver = jQuery.browser.version; var op, im, w, h;
			if(ver < 7 || ver == 8){
				var alphaSrc = $startdiv.css('backgroundImage').replace(/.*\(['"]?|['"]?\)/g, '');
				if(ver == 8){
					op = $startdiv.get(0).currentStyle['opacity'];
					im = new Image();
					im.onload = im.onerror = function(){
						w = im.width || 0;
						h = im.height || 0;
						makeAlpha();
					};
					im.src = alphaSrc;
				}
				function makeAlpha(){
					$startdiv.replaceWith('<table class="startshow"><tr><td><div ' +
					'style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' +
					alphaSrc + '\');"></div></td></tr></table>');
					$startdiv = slideshow.setting.$wrapperdiv.find('.startshow');
					if(ver == 8){$startdiv.css({opacity: op}).mouseenter(enterfunc).find('div').css({width: w, height: h});}
				}
				if(ver < 7){makeAlpha();}
			}
		@end @*/
		if(ver != 8){$startdiv.mouseenter(enterfunc);}
	}

Whichever you use, simply replace the oninit function you were using from last time with it.