Hi,

I am using the jquery tools, and I am trying to change the on click event to on mouse over for the overlay (the enlarged image) - so that the image will enlarge on mouseover and will shrink back on mouseout. However I'm not very good with javascript, can you pls help?

Here is the javascript:

  $(function() {    
    $(".ppy img[rel]").overlay({effect: 'apple'});
  });

And the html:

<div class="ppy">
  <img
    src="http://static.flowplayer.org/tools/img/photos/gustavohouse.jpg"
    rel="#photo1"/><span><a
        href="http://www.lifestyleincentives.co.uk/o2eco"
        target="_blank"
        class="link">www</a>Desing \Css</span>
</div>

<div class="apple_overlay" id="photo1"><img
    src="http://static.flowplayer.org/tools/img/photos/alexanderplatz-station-medium.jpg"
/></div>

5 answers

2
points
This was chosen as the best answer

This will give you an image preview on mouse over.

Here's the Javascript

// starting the script on page load
$(document).ready(function(){
    imagePreview();
    $("#rollover").addClass("gallery");
});

//The overlay or pop-up effect
this.imagePreview = function(){ 
    /* CONFIG */

        xOffset = 40;
        yOffset = 415;

        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result

    /* END CONFIG */
    $("a.preview").click(function(e){
        return false;
        });
    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                
        $("#preview")
            .css("top",(e.pageY - yOffset) + "px")
            .css("left",(e.pageX + xOffset) + "px")
            //starts the animate at 0 x 0
        .css("width", "0px")
        .css("height", "0px")
    //animate to size. I assumed all images were the same size
        .animate({
            width: '640px',
            height: '425px'
          }, 250, 'linear', function() {
        });                     
    },
    function(){
        this.title = this.t;    
        $("#preview").remove();
    }); 
    $("a.preview").mousemove(function(e){
        var top = e.pageY - yOffset;
        var left = e.pageX + xOffset;
        //flips the image if it gets too close to the right side
        while ((left + 400) > window.innerWidth){
            left -= 400;
            }
        $("#preview")
            .css("top",top + "px")
            .css("left",left + "px");
    });         
};

Here's the CSS

#preview{
    position:absolute;
    border:1px solid #000;
    background:#fff;
    padding:5px;
    display:none;
    color:#fff;
}

And Here's your html

<div id="rollover" style="margin:400px auto; width:700px;"> 
    <ul> 
      <li><a href="http://static.flowplayer.org/tools/img/photos/alexanderplatz-station-medium.jpg" class="preview"><img src="http://static.flowplayer.org/tools/img/photos/gustavohouse.jpg"/></a></li> 
    </ul>   
</div>

If the fade in isn't what you're looking for let me know and I'll help you figure out a different animation.

Answered about 9 years ago by David Leininger
o.k.w 2355
1
point

The jQuery Tools overlay plugin are meant for lightbox-like effect, which masked the rest of the page and show only the enlarged image upon clicking the thumbnail. I really don't see how using mouseover will be intuitive for users.

You might want to try tooltip thumbnail-like effect.
E.g. Easy Image Preview with jQuery

Answered about 9 years ago by o.k.w
Mottie 1134
1
point

I agree with o.k.w., you are describing a tooltip.

I know jQuery Tools has their own tooltip, but I don't think it allows for animation like you want. If you are looking for a tooltip that animates, check out SimpleTip (look under Effects: Custom Show Effects) or a slightly more complicated tooltip called Beauty Tips (look under Complex Animation)

Answered about 9 years ago by Mottie
0
points

That example is great (and makes sense because of reduced markup) and I would have used it, however what I like about the jQuery tools plugin is that "apple" effect that animates the image increasing.

Can your example animate? Or do you know any others that animate?

Answered about 9 years ago by adelacreative
0
points

The script works great! Is it possible to also animate the size of the large images like here: http://flowplayer.org/tools/demos/overlay/apple.html ?

Thanks!!

Answered about 9 years ago by adelacreative
  • Yeah, I'll work on that, and get something going in the next little bit. David Leininger about 9 years ago
  • Ok, I changed it to do an animate (see code above). It's not exactly the same, but you can mess with the CSS to get that rounder corners and stuff that you want. Anyways, I assumed all of your images were the same size if that isn't true then let me know and I'll fix it again. David Leininger about 9 years ago
  • Thanks for looking into this again! Unfortunatelly my images are not all the same size :( (www.adelacreative.com) adelacreative about 9 years ago
  • Ok, I'll look into this. I'll also post a fix on the current jQuery so that your bottom images will show without a scroll. David Leininger about 9 years ago
  • Thank you, I will apply it this weekend and see if it works! adelacreative about 9 years ago
  • The script opens as all images were the same size, and the html doesn't validate anymore, so I will have to use a jquery tools script instead. Thanks for taking the time to look into this though, you still get the best answer for the effort ;) adelacreative about 9 years ago
  • Doesn't Fancybox do exactly what you're trying to do? Gary Hepting about 9 years ago
  • Hi Gary, almost, except I need mine to show on mouseover and dissapear on mouse out.. adelacreative about 9 years ago