ultimate fade-in slideshow nav buttons opacity

**mcbrandnew** · 05-08-2010, 05:35 PM

It's a great script, but I wanted to modify it a bit. I moved the navigation buttons on top of the rotator, and to the sides so it overlaps the slideshow. I also lowered the opacity of them, but here's my question:

How can I make the buttons invisible until I hover the rotator so that they both stay without opacity until a mouseover over the image?

Here's the code with my modulations:

Code:

<html>
<head>

<script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.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">


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:0, wraparound:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler"
})

</script>

</head>

<body><center>

<div id="fadeshow2"></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; z-index:2; 

position:relative; top:-120px; left:-95px; text-align:center; opacity:0.4; filter:alpha(opacity=40)" 

/></a>  



<a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" style="border-width:0; z-index:2; 

position:relative; top:-120px; left:95px; text-align:center; opacity:0.4; filter:alpha(opacity=40)" 

/></a>
</div>

</center>
</body></html>

Thanks in advance! /André

**azoomer** · 05-12-2010, 05:10 PM

Hi Andre
I played around with the code and came up with this. I am sure the script i made is quite ridiculous, i am a newbie to jquery, but take a look and see if that is the effect your are after.

**mcbrandnew** · 05-12-2010, 08:29 PM

I have nooo idea how you figured that out, but the function is exactly what I want. You are the man!
If you have the time I would love some explanation to the code, since I really don't understand that much... If you're the noob, then I don't know what I am...

But anyway, thanks alot! Great job!

**azoomer** · 05-12-2010, 09:48 PM

Glad you liked it. I have made comments to the code now so you can go back and look at the source again. I have explained what i THINK it does, but the code may have some bugs. Also not sure about the cross browser thing. Good luck

**mcbrandnew** · 05-14-2010, 02:10 PM

Awesome! That helped me a lot! But there is one disturbing thing, the fact that if you move the cursor away from the buttons in a hurry, only that button will stay visible, and it doesn't disappear...
Could use something to tell the buttons to "reset" when you leave them. I've tried to work around it with my limited code knowledge, but I can't see how it could be done without disrupting the whole thing...

I also tried to remove the feature where only the button you hover is visible, to see if that could help, but it was easier said than done...

**azoomer** · 05-14-2010, 05:03 PM

Yeah I see what you mean. I have some difficulty in getting my head around this, but i tried to change it to this. Not sure if it will work in the long run. Try it out. Note that i changed id name(#fadeshow2toggler -> #toggler), it was so long. Hope this one is better.
By the way don't ask me to explain this one. My method is trial and error !!

**azoomer** · 05-16-2010, 12:20 PM

Hi mcbrandnew ! Here is another one with the buttons fading in and out. Again: buggy newbiecode, but in my browser (FF) it works. Any corrections to the code would be appreciated.

Thread: ultimate fade-in slideshow nav buttons opacity

Thread Tools

Search Thread

ultimate fade-in slideshow nav buttons opacity

The Following User Says Thank You to azoomer For This Useful Post:

wow!

Great! but...

Bookmarks

Bookmarks

Posting Permissions