Log in

View Full Version : 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:


<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 (http://azoomer.com/ufis/). 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 (http://azoomer.com/ufis/). 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 (http://azoomer.com/ufis/fade.html) 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.