Image arrows when hovering?

[harlem]

1) Script Title: Ultimate Fade-in slideshow (v2.1)

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

3) Describe problem:
If you look at the bottom right example for this script, you will notice that the navigational buttons are located below the images. Is it possible to make arrows appear within the image when hovering over it? For example at the top of the image?
Say that you hover on the right side of the image, then an arrow to the right will appear, and vice versa.

[jscheuer1]

For your on page init follow this example's highlighted parts (don't miss the added comma, red after the togglerid):

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //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:5, wraparound:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "fadeshow2toggler",
	oninit: function(){
		var tObj = this.setting.$togglerdiv.remove();
		this.setting.$wrapperdiv.prepend(tObj).bind('mouseover', function(){
				tObj.fadeIn();
		}).bind('mouseout', function(e){
			if(jQuery.inArray(e.relatedTarget, jQuery(this).find('*')) < 0){
				tObj.fadeOut();
			}
		});
		this.paginateinit(jQuery);
	}
})

Add these styles to the head of the page:

<style type="text/css">
#fadeshow2toggler {
	display: none;
	position: absolute;
	z-index: 1002;
}
#fadeshow2toggler .prev {
	float: left;
	margin-left: 3px;
}
#fadeshow2toggler .next {
	float: right;
	margin-right: 3px;
}
</style>

where fadeshow2toggler is the togglerid for your show. Then use something like so for the togglerid div:

<div id="fadeshow2toggler" style="width:250px; margin-top:10px">
<a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" /></a>
<a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" /></a>
</div>

making sure that the width is the same as the show's width.

[harlem]

Thank you so much, seems to work!

One strange thing though, when I move my mouse just outside (above) the picture, the arrows fade out, then fade in and fade out again quickly. Do you know why?

[jscheuer1]

Nope, I'm not seeing it here. What browser are you using? Also:

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

[harlem]

Here is the page with the problem:

http://justtesting.atspace.com/test3.htm

[jscheuer1]

I'm not sure what you've done to cause that, and I can't imagine that you would really want a show that is off center like that. It's probably something else though, something to do with your linked in styles. I even tried using your dimensions with my show, it still wouldn't do that. I was able to duplicate the problem by using your linked in styles, and solve it. I can also tell you that:

#fadeshowtoggler {
	display: always;
	position: absolute;
	z-index: 1002;
}

Is meaningless. But its effect would be display: block;. However, to get them to be always seen, change:

	oninit: function(){
		var tObj = this.setting.$togglerdiv.remove();
		this.setting.$wrapperdiv.prepend(tObj).bind('mouseover', function(){
				tObj.fadeIn();
		}).bind('mouseout', function(e){
			if(jQuery.inArray(e.relatedTarget, jQuery(this).find('*')) < 0){
				tObj.fadeOut();
			}
		});
		this.paginateinit(jQuery);
	}

to:

	oninit: function(){
		this.setting.$wrapperdiv.prepend(this.setting.$togglerdiv.remove()
		.css('display', 'block'));
		this.paginateinit(jQuery);
	}

Finally, to answer your actual question though, just add the highlighted:

	oninit: function(){
		var tObj = this.setting.$togglerdiv.remove();
		this.setting.$wrapperdiv.prepend(tObj).bind('mouseover', function(){
				tObj.fadeIn();
		}).bind('mouseout', function(e){
			if(jQuery.inArray(e.relatedTarget, jQuery(this).find('*').andSelf()) < 0){
				tObj.fadeOut();
			}
		});
		this.paginateinit(jQuery);
	}

That will stop the "when I move my mouse just outside (above) the picture, the arrows fade out, then fade in and fade out again quickly" thing.

Also, a bit more experimenting shows that this simplified code will also solve the problem:

	oninit: function(){
		var tObj = this.setting.$togglerdiv.remove();
		this.setting.$wrapperdiv.prepend(tObj).hover(function(){
			tObj.fadeIn();
		}, function(){
			tObj.fadeOut();
		});
		this.paginateinit(jQuery);
	}