Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts

    jQuery Image Gallery WITH Mouseover Fading Effect

    Hey I'm a photo retoucher, and really want to be able to show clients my abilities with some before and after of images that I've worked on. This thing is that I don't want them clicking to reload the page everytime in order to get to the next image.

    Does anyone know a way to combine the Nivo Slider Image Gallery:
    http://nivo.dev7studios.com/

    ...with this Image Mouseover Fade technique:
    http://bavotasan.com/tutorials/creat...r-fade-effect/

    ...to accomplish this task?

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    From the slider page:

    "Note that only images or images wrapped in links are allowed in the slider div. Any other HTML will break the slider."

    Keeping that in mind, first thing you need to do is figure out how to make the slider not auto play.

    Then I guess you could write your HTML like:
    Code:
    <div id="slider">
    <a href="#x">
    <img src="img1a.jpg" />
    <img src="img1b.jpg" />
    </a>
    <a href="#x">
    <img src="img2a.jpg" />
    <img src="img2b.jpg" />
    </a>
    <!-- etc... -->
    </div>
    Then your jQuery for the mouseover something like:
    Code:
    $(document).ready(function(){
     
    $("slider a").hover(
    function() {
    $(this).children("img").eq(0).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
    $(this).children("img").eq(0).stop().animate({"opacity": "1"}, "slow");
    });
     
    });
    That should trigger the first image inside the hovered link to fade out.

    To make your link not do anything you can add:
    Code:
    $("#slider a").click(function(){
    return false;
    });
    your CSS something like:
    Code:
    div#slider a {
    position: relative;
    width: XX; /* the width of your image */
    height: XX; /* the height of your image */
    display: block;
    }
     
    div#slider a img {
    position: absolute;
    left: 0;
    top: 0;
    border: none;
    }
    
    div#slider a img:first-child {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    border: none;
    }

    Didn't test any of this but, seems like it should work out.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Thanks. I'll give it a try and see what happens.


  •  

    Posting Permissions

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