Fade-in slideshow 2.4 - Mouseover to start the show?

[dmassphoto]

1) Script Title: Fade-in Slideshow 2.4

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

3) Describe problem: The way I have my page setup right now is to have a single image in the background that fades into one more image. Is it possible to make the slideshow manual and start the transition by a simple mouseover? What type of code would I need and where would I put it? Thanks!

[jscheuer1]

Do you already have it set up with the slideshow? If so, are you using the descriptions feature?

Basically, we can get the show to initialize in manual and remove the current mouseover/out events and substitute our own without editing the script. This can all be done using the show's oninit function.

Just how we do that would depend upon whether or not you are going to use the descriptions, and if so, how.

Also, starting onmouseover is pretty easy. Is there anything that you would want to have happen onmouseout or on subsequent mouseovers?

In any case, it would be helpful to see what you currently have:

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

[dmassphoto]

Found the fix, with the help of a friend. For future reference, here's what I did....

1. In the html page, make sure that:
a. displaymode is set to 'manual'
b. descreveal is set to "none"
c. Togglerid is set to ""

That's all you need to worry about in the html page. On to the javascript

2. You will need to comment out lines 79 and 80. It should look like this....

// setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover
// setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false})

3. Go to line 89 and copy it twice just under it so that the copied code is now in lines 90 and 91.

4. Line 90 should look like this

setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showslide('next')})

5. Line 91 should look like this

setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showslide('next')})

In line 91, you can change it to "next" or "previous" or a number of other things I think, depending on what you want to accomplish. I was trying to have just one image fade into another, then back on mouseleave, so this works great. Hopefully this helped somebody.

[dmassphoto]

By the way, here's the link showing you what I wanted to accomplish

http://dmassphoto.com/fade-example-n...-example-1.htm

I wanted the viewer to focus on the image instead of where they should click to start the transition. The mouseenter seemed perfect for that, and on mouseleave I wanted it to go back to the original image. If there's a way you can make it more efficient, I'd love to see it! Thank you very much for this!

The commenting in the code is excellent, btw.

[jscheuer1]

That doesn't work at all in Firefox. Anyways I don't like to edit the script if I don't have to, makes it harder to get support later. And harder to keep track of what one has done.

If you revert to the official version of the script, this on page call works in Firefox, IE, and Opera, probably all that the official version works in:

<script type="text/javascript">
fadeSlideShow.prototype.oninit = function(){
	var show = this;
	function overOut(){
		show.showslide.call(show, 'next');
	}
	this.setting.$wrapperdiv.unbind('mouseenter mouseleave').hover(overOut, overOut);
};

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [334, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://dmassphoto.com/fade-example-new/img/ORAU-Before.jpg", "", "", ""],
		["http://dmassphoto.com/fade-example-new/img/ORAU-after.jpg", "", "", ""]//<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false, randomize: false},//auto or manual, pause btwn slides(milliseconds),cycles b4 show stops, more at www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 2000, //transition duration (milliseconds) between slides
	descreveal: "none",//style of description panel - ondemand, always, peekaboo, none
	togglerid: "not", //use if you want to create nav controls for back/forth movement between slides. set "togglerid" to the ID of another DIV on your page that will house nav controls.  Example: togglerid:"slideshowtoggler"
	oninit: function(){
		this.oninit();
	}
})

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [500, 353], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://dmassphoto.com/fade-example-new/img/mel-before.jpg", "", "", ""],
		["http://dmassphoto.com/fade-example-new/img/mel-after.jpg", "", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false, randomize: false},//auto or manual, pause btwn slides(milliseconds),cycles b4 show stops, more at www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 2000, //transition duration (milliseconds) between slides
	descreveal: "none",//style of description panel - ondemand, always, peekaboo, none
	togglerid: "not", //use if you want to create nav controls for back/forth movement between slides. set "togglerid" to the ID of another DIV on your page that will house nav controls.  Example: togglerid:"slideshowtoggler"
	oninit: function(){
		this.oninit();
	}
})
</script>

Note: You need a togglerid to avoid a fatal error in Firefox. You don't have to actually have a div with that id though. Also see the added comma after the togglerid value. This is also required.

Your table doesn't work in Firefox either, this version does:

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="334" valign="top"><div id="fadeshow1"></div>&nbsp;</td>
    <td align="center"><p>Testing 123 testing 123 this is an example to show the difference between a simple photoshoot and an image created by me.<br>
      <br>
    Place your mouse over the images to see the difference</p></td>
    <td width="500" valign="top"><div id="fadeshow2"></div>&nbsp;</td>
  </tr>
</table>

[dmassphoto]

Thanks! I got it working.

[jscheuer1]

I was playing around with this a bit more, might give you some ideas:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://www.dmassphoto.com/fade-example-new/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">
fadeSlideShow.prototype.oninit = function(){
	var show = this;
	function overOut(){show.showslide('next');}
	this.setting.$wrapperdiv.unbind('mouseenter mouseleave').hover(overOut, overOut);
};

fadeSlideShow_descpanel.slidespeed = 600; //speed of description panel animation (in millisec)

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [334, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://dmassphoto.com/fade-example-new/img/ORAU-Before.jpg", "", "", "Conference Room - Before"],
		["http://dmassphoto.com/fade-example-new/img/ORAU-after.jpg", "", "", "Conference Room - After"]//<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false, randomize: false},//auto or manual, pause btwn slides(milliseconds),cycles b4 show stops, more at www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 2000, //transition duration (milliseconds) between slides
	descreveal: "peekaboo",//style of description panel - ondemand, always, peekaboo, none
	togglerid: "not", //use if you want to create nav controls for back/forth movement between slides. set "togglerid" to the ID of another DIV on your page that will house nav controls.  Example: togglerid:"slideshowtoggler"
	oninit: function(){
		this.oninit();
	}
})

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [500, 353], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://dmassphoto.com/fade-example-new/img/mel-before.jpg", "", "", "Mel - Before"],
		["http://dmassphoto.com/fade-example-new/img/mel-after.jpg", "", "", "Mel - After"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false, randomize: false},//auto or manual, pause btwn slides(milliseconds),cycles b4 show stops, more at www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 2000, //transition duration (milliseconds) between slides
	descreveal: "peekaboo",//style of description panel - ondemand, always, peekaboo, none
	togglerid: "not", //use if you want to create nav controls for back/forth movement between slides. set "togglerid" to the ID of another DIV on your page that will house nav controls.  Example: togglerid:"slideshowtoggler"
	oninit: function(){
		this.oninit();
	}
})
</script>
<style type="text/css">
body {
	background-color: #000;
	color: #fff;
	font: normal 95% sans-serif;
}
table {
	height: 500px;
	border: none;
	margin: 0 auto;
}
td {
	padding: 0;
	margin: 0;
}
#mel {
	vertical-align: top;
}
td p {
	padding: 0 1em;
	text-indent: 1em;
	text-align: left;
	max-width: 25em;
}
.descpanelfg {
	text-align: center;
}
</style>
</head>
<body>
<table>
  <tr>
    <td><div id="fadeshow1"></div></td>
    <td><p>Testing 123 testing 123 this is an example to show the difference between a simple photoshoot and an image created by me.
    <p>Place your mouse over the images to see the difference.</td>
    <td id="mel"><div id="fadeshow2"></div></td>
  </tr>
</table>
</body>
</html>