Results 1 to 6 of 6

Thread: Image arrows when hovering?

  1. #1
    Join Date
    Jan 2010
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Image arrows when hovering?

    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.
    Last edited by harlem; 01-01-2010 at 04:24 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,028
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

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

    Code:
    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:

    Code:
    <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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    harlem (01-01-2010)

  4. #3
    Join Date
    Jan 2010
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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?

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,028
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    Jan 2010
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Here is the page with the problem:

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

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,028
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    #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:

    Code:
    	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:

    Code:
    	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:

    Code:
    	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:

    Code:
    	oninit: function(){
    		var tObj = this.setting.$togglerdiv.remove();
    		this.setting.$wrapperdiv.prepend(tObj).hover(function(){
    			tObj.fadeIn();
    		}, function(){
    			tObj.fadeOut();
    		});
    		this.paginateinit(jQuery);
    	}
    Last edited by jscheuer1; 01-02-2010 at 05:00 AM. Reason: more info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    harlem (01-02-2010)

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
  •