Ultimate Fade-in slideshow Play onMouseover

[oscaralex]

Hi,

Can someone help me?.. Is there a way to make the Ultimate Fade-in slideshow Play onMouseover instead of auto play..?

Apologies for my ignorance if this is a simple command.

Many thanks
Alex

[jscheuer1]

And then what happens when the mouse moves out?

1. Continue playing? If so, what if anything should happen if the mouse moves out and then back over?
   
   
2. Or when the mouse moves back out, have it stop and then start again when the mouse moves back over?

There are other possibilities. Bear in mind that (if descriptions are used) the descreveal setting will impact the overall effect of the show. Without further modification mouseover will still activate 'ondemand' descriptions, but since the slideshow is now moving, they will probably be hard to read. Peekaboo descriptions will only show for a period of time regardless of how long an image is seen for. Using 'always' might be best if descriptions are used. With this type of setup though, no descriptions would be best. Also linking the images would be a bad idea.

What exactly are you going for? I worked out a scenario from #2 above before I realized the numerous variations there could be. For mouseover play/mouseout pause add the highlighted as shown, set the displaymode type to auto, the descreveal as suggested (but best just to have no descriptions or links in the imagearray), all also as shown. Don't miss the added comma (red) after the togglerid value:

<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: [
			["http://i26.tinypic.com/11l7ls0.jpg"],
			["http://i29.tinypic.com/xp3hns.jpg"],
			["http://i30.tinypic.com/531q3n.jpg"],
			["http://i31.tinypic.com/119w28m.jpg"] //<--no trailing comma after very last image element!
		],
	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "",
	oninit: function(){
		var setting = this.setting;
		setting.ismouseover = true;
		setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover = false})
		setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover = true}) //pause slideshow mouseout
	}
})

</script>

If you have something else in mind, please be specific.

[oscaralex]

Perfect thanks..

Cheers
Alex

[oscaralex]

Hi John,

Sorry to be a pain...

I put the code in as you detailed above, and in Live View it has been working perfectly as I would like it too..

However I've just sent the page live ( http://www.gecodesigns.com/retouchin...ipulation.html ) but when it loads up I'm getting black boxes where the slideshows are until I hover the mouse.

Is there a way so that the first image loads in on page load but doesn't animate until mouse over?

Or is that what it is supposed to be doing and I've missed something off?

Many thanks
Alex

[jscheuer1]

I had only tested locally. I see what you mean. There are various ways to deal with that. We could make the background image of the slideshow the first image. But then it wouldn't fade in. And would still be subject to delay in showing up when the page is loaded for the first time or after clearing the cache. I favor this solution - Snag the unofficial updated version of the script that actually uses the loading image:

http://home.comcast.net/~jscheuer1/s...deslideshow.js

It also has some other fixes, one of which may be very important for this implementation in IE.

And grab the loading image:



Use the updated script and put the loading image in the same folder as the page that has the slideshows on it.

Add this (highlighted) as shown (you only need it once on the page):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

</script>

<script type="text/javascript">

fadeSlideShow.custommouse = function(){
		var setting = this.setting;
		setting.ismouseover = true;
		setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover = false})
		setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover = true}) //pause slideshow mouseout
		setting.onslide = function(){};
};

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1",
	dimensions: [600, 437],
	imagearray: [
		["images/habitat-retouching.jpg"],
		["images/habitat-retouching2.jpg"],
		["images/habitat . . .

Change all four of the:

	oninit: function(){
		var setting = this.setting;
		setting.ismouseover = true;
		setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover = false})
		setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover = true}) //pause slideshow mouseout
	}

to:

	onslide: fadeSlideShow.custommouse

So that, for example the first one would look like so:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1",
	dimensions: [600, 437],
	imagearray: [
		["images/habitat-retouching.jpg"],
		["images/habitat-retouching2.jpg"],
		["images/habitat-retouching3.jpg"]
	],
	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "",
	onslide: fadeSlideShow.custommouse
})

Make sure to change from oninit to onslide.

That should do it, works well in a live mock up of the page. Oh and:

The browser cache may need to be cleared and/or the page refreshed to see changes.

[oscaralex]

Thank you so much for all you help John. Your a true gent.

Many thanks
Alex

[jscheuer1]

Oh I almost forgot, your page is in violation of the Dynamic Drive Usage terms:

Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

I see you've also removed the credit from the script, but it clearly states:

/* Ultimate Fade-in slideshow (v2.4)
* Last updated: May 24th, 2010. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

And you're doing yourself no favors by removing the update info:

//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize
//May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added.
//Unofficial Updates:
//Sept 2nd, '11 Update for loading image bug see: http://www.dynamicdrive.com/forums/showthread.php?p=260188#post260188
//Sept 4rth '11 Update for initial mouseover bug in some browsers
//Sept 13th '11 Update for missing first image bug in IE

As it will be of value to you if you ever need help again.

All that said, there's one other tweak that would be good. I thought to add it in my last post but my test page seemed to indicate it wasn't required. However, the live page could use it - preloading the loading image, add the highlighted as shown:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

//***********************************************
// Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
// This notice MUST stay intact for legal use
// Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
//**********************************************/

</script>

<script type="text/javascript">

;(function(){
	var loading = new Image();
	loading.src = 'loading_y.gif';
})();

fadeSlideShow.custommouse = function(){
		var setting = this.setting;
		setting.ismouseover = true;
		setting.$wrap . . .