Advanced Search

Results 1 to 7 of 7

Thread: ultimate fade-in slideshow nav buttons opacity

  1. #1
    Join Date
    May 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default ultimate fade-in slideshow nav buttons opacity

    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é

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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.

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

    mcbrandnew (05-12-2010)

  4. #3
    Join Date
    May 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default wow!

    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!

  5. #4
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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

  6. #5
    Join Date
    May 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Great! but...

    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...

  7. #6
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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 !!
    Last edited by azoomer; 05-14-2010 at 05:09 PM.

  8. #7
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •