DD Ultimate Fade In Slideshow V2.4 - OnMouseOver Function Add

[JimboDavies]

1) Ultimate Fade in Slideshow V2.4

2) http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) This script is amazing, and very powerful. I am working on integrating it into my site, but would like to know if it is possible to add a function to make it display a particular image when the user hovers their mouse over a different image/div/text on the page

For example, if I have five linked images in the Slideshow Array, each one relating to a particular area of the site, if the user hovers over the corresponding paragraph below the slideshow, I would like the slideshow to change to the relevant image, and pause.

Can it be done? Grateful for any help/assistance.

Jimbo

[jscheuer1]

That's pretty easy. Just use:

onmouseover="mygallery.navigate(0);"

where mygallery is the name of the variable you used when you declared:

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimen . . .

That will move it to the first slide and pause it. The slides are numbered from 0, so the second one would be 1, the third is 2, and so on. So to move to the fourth slide when someone hovers over a paragraph, you could do:

<p onmouseover="mygallery.navigate(3);">Some text here that relates to the fourth slide.</p>

[JimboDavies]

John,

Very many thanks, that's exactly what I needed. What should I put in the OnMouseOut to make the slideshow resume?

Additionally - are you (or any other kind person) able to tell me how to make the popup text/annotation box on this appear in the top left corner rather than bottom?

Cheers,

Jimbo

[jscheuer1]

Those are both a little more complicated. For the mouseout, use:

 onmouseout="mygallery.setting.displaymode.type='auto'; mygallery.showslide('next');"

Like, using my previous example:

<p onmouseover="mygallery.navigate(3);" onmouseout="mygallery.setting.displaymode.type='auto'; mygallery.showslide('next');">Some text here that relates to the fourth slide.</p>

The other thing, about the description, I believe depends a bit upon what sort of descreveal you are using here:

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", "", "", "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!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

Is it "ondemand", "always", or "peekaboo"? Obviously it's not an issue at all if you use "never".

I also believe that the author has worked this out, or was about to in another thread for at least one of those three descreveal types. I'll have a look and see if he did. No sense duplicating the effort.

[JimboDavies]

Thanks for the onmouseout.

I'm using Peekaboo as descreveal, but it could just as easily be ondemand. If he's already worked it out, brilliant; I did a bit of searching but couldn't find anything.

Cheers,

Jimbo

[jscheuer1]

I found the thread, and no he hasn't. I think both "peekaboo" and "ondemand" would be easiest, perhaps the same, certainly similar. Neither require the description control images that "always" does.

I already had a cursory look at the code, I'll see what I can come up with.

[jscheuer1]

I just worked out a method for getting them from the top. But then I realized you asked for "top left corner". I'm having a little trouble visualizing that. Do you mean that they should be on the top left but not extend all the way accross? I think I can do that too, but I need to know. I also need to know how far across they would extend, 50%? A set number of pixels? If we do this, it would be important, if possible - that there not be too much wrapping of the descriptions at that width. Wrapping to three lines seems acceptable. Beyond that I'm not sure how to prevent some undesirable effects visa vis the text bleeding outside the shaded area and being partially visible before it drops down. There probably is a way, but I'd rather not have to deal with it if we don't have to.