Ultimate Slideshow.v2 Rollover Image

[kuraldesign]

1) Script Title: Ultimate SlideShowv2

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

2) Problem: I've been using the Ultimate Slide show v2 and it works great. My client wants onmouseover to show another slide, paused still and also to be a link, then on rollout return to the slideshows order? Can this be done?

if not....

Is there a way to style, through CSS, the hidden panel link text. I've edited the font-style in the javascript file, but it's not enough? Is there a way I can control the height of the hidden DIV to cover the slide not matter what size the text?

The link below shows what I'm trying to do.

http://kuraldesign.com/beta/morrowco/indexR1.html

I apologize for the rambling...this is my first post.

[kuraldesign]

Okay I found where to alter the text using the CSS using class description

.descpanelfg

, but I would like to Vertically align the text so it sits in the center. Can anyone help me out with this?

Thank you in advance.

[jscheuer1]

Add this to your stylesheet:

.descpanelfg span {
	display: block;
	position: relative;
	top: 50%;
}

Wrap each of your descriptions in span tags, example:

["global_images/design8_1.jpg", "global_images/design8_4.jpg", "_new", "<span>The answer requires intelligence gathering to properly identify shareholders. Morrow has been providing shareholder surveillance since 1980, longer than any other firm. We can provide the most accurate profile of shareholders in the industry and via our 12-month active surveillance engagement, will provide monthly and ad-hoc reports to answer the question routinely – as the answer to this question changes</span>"],

Add this (highlighted) to your slide show declaration:

 . . . uration: 750, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "",
	onslide: function(){
		var d = this.setting.$descpanel.find('span');
		d.css('marginTop', '-' + (d.innerHeight() / 2) + 'px');
	}
})

Be sure not to miss the added comma (red) after the:

togglerid: "",

value.

Also, inside fadeslideshow.js I would suggest adjusting the speed of the description panel to 400:

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

//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize

var fadeSlideShow_descpanel={
	controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
	//fontStyle: 'italic normal 14px Georgia',//font style for text descriptions
	slidespeed: 400 //speed of description panel animation (in millisec)
}

[kuraldesign]

Thanks John. it's works perfectly....

I guess there is no luck in onmouseover fading to another slide..... I was going to create Answer slides and have the answer reveal onmouseover and then go back to the rotating Question slides onmouseout? Just wondering if it's possible with this script?

Karl

[kuraldesign]

John.

One more bizarre request....My client loved the rollover feature, but asked to adjust the hit area.

Is there a way to control the hit feature to only reveal at the center and not the whole image?

Thanks Karl

[jscheuer1]

This may be a bad idea. My thinking being that the folks viewing this won't know. It will be hard enough for them to grasp the concept of more info onmouseover, even with instructions to that effect right on the page. Making it so that they have to venture even farther into the 'zone' to get this feature only guarantees that less people will discover it.

That said, we can do this. Add on to the declaration:

 . . . ration: 750, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "",
	onslide: function(){
		var d = this.setting.$descpanel.find('span');
		d.css('marginTop', '-' + (d.innerHeight() / 2) + 'px');
	},
	oninit: function(){
		var sObj = this, w = this.setting.$wrapperdiv.unbind('mouseenter'),
		a = jQuery(document.createElement('div')).css({zIndex: 10000, position: 'absolute', opacity: '0.01', backgroundColor: '#fff',
		height: w.height()/2, width: w.width()/2, top: w.height()/4 + 'px', left: w.width()/4 + 'px'}).bind('mouseenter', function(){
			sObj.showhidedescpanel('show');
			this.style.zIndex = 0;
		});
		w.append(a).bind('mouseenter', function(){sObj.setting.ismouseover=true;}).bind('mouseleave', function(){a.css('zIndex', 10000);});	
	}

})

As before, don't miss the added comma (red again here) after the previous value.

[kuraldesign]

Thanks John....I agree with you a hundred percent. I told them this already...but I think they need to see it live before agreeing with me.

Again, it works perfectly

-Karl