Home » jQuery10 February 2010

jQuery: Preview Image with Tooltip Effect

Here, I will show you how to preview Image as a tooltip effect. I mean, you will be able to preview large image when you hover the thumbnail image. The preview is shown as tooltip is shown generally.

View Demo || Download Code

As you can see in the js code, I have positioned the top and left for large image with e.pageY and e.pageX. Then, image is added with the img tag. After that, the image is displayed slowly with fadeIn(“slow”). Large image is made hidden with fadeOut function when the cursor is moved away from the thumbnail image.

Here’s the full source code:

View Demo || Download Code

Thanks.

jQuery

Get New Post by Email

Find me on

FacebookTwitterGoogle+LinkedInRSS Feed
  • Mark

    Mukesh,

    Great demo, you read my mind as I was thinking of a way to replace the tooltip text to an image.

    The fade in and out doesn’t look necessary for this though. To remove the fades, i presume we would just take out the functions fadeIn and fadeOut from the argument?

    Also, how would you implement an onclick feature for the enlarge photo?
    It would be perfect to put the enlarge photo at the bottom.

    Thanks,
    Mark


  • //.fadeIn("slow");
    .css("display", "block");


    //$("#large").fadeOut("fast");
    $("#large").css("display", "none");

    See, at the code. I have commented fadeIn and fadeOut and have used .css instead.

    For onclick feature, I will be posting new article :)

    Cheers,

  • Thanks Mukesh, look forward to seeing the onlick feature!

  • rizdwan

    how about windows border? can u fixed so the image can still display within the browser layout. dont want the scroll

    exmple like this
    http://home.comcast.net/~littlemoe85/thumbhover/index.html

    how to do like that

  • Linalexa1

    I spent a lot of trying to find a simple tooltip.. Finally I got it!! Thanks so much for this tooltip!!!

  • Thanks Mukesh, I liked it

  • Pariventhan

    Hi, Thanks lot.
    It’s very useful to me
    but i need one,
    i put the image in the datalist of asp.control and inside the table, there is not displayed the tooltip image only display images. but i put open without table or datalist working fine.
    any idea..

  • Rahul

    hi this is very useful to me for hard coding But when i try to implement it on magento it does not seem to work please help me how can i implement it on magento product listing page with details please mail me rahul@indiainteractive.net thanks in advance sir ji

  • Rodrigo T.

    Hi, Thanks for sharing!