jQuery Thumbnail Hover Popup for Greasemonkey

Demo

Click here to view the demo

How To Use

Download

$("img").thumbPopup({
  imgSmallFlag: "_s",
  imgLargeFlag: "_l"
});

Options

Option Type Default
popupId String thumbPopup
popupCSS Properties {‘border’: ‘1px solid #000000’, ‘background’: ‘#FFFFFF’}
imgSmallFlag String _t
imgLargeFlag String _l
cursorTopOffset Integer 15
cursorLeftOffset Integer 15
loadingHtml HTML <span style=”padding:5px;”>Loading</span>

Description

This plugin will display a thumbnail’s larger image like a tooltip when you hover over the thumbnail.  I originally made the plugin for Greasemonkey so I could preview larger images on certain sites without having to click to the next page.  It also works great when implemented directly on a site.

This plugin can be used on sites whose thumbnails and larger images have almost the exact same filenames except for one piece that changes between the two.  Here are some example sites, the filename conventions they use, and example userscripts for Greasemonkey:

Size Flickr Vi.sualize.us TinyPic
Small filename_s.jpg filename_m.jpg filename_th.jpg
Medium filename_m.jpg
Large filename.jpg filename_h.jpg filename.jpg
Userscript Userscript Userscript
Advertisements
Leave a comment

76 Comments

  1. simply superb…………… thanks to save my project. might be i loose that project…….

    Reply
  2. mogadanez

     /  May 8, 2009

    good job, but i have a patch
    var mouse_event = event; //!!!! here need for firefox. because notmouse event on load has pageX/Y undefined.
    //Load full image in popup
    $(“”)
    .bind(“load”, {thumbImage: this}, function(event)
    {
    //Only display the larger image if the thumbnail is still being hovered
    if ($(event.data.thumbImage).data(“hovered”) == true) {
    $(popup).empty().append(this);
    $(popup).show();
    updatePopupPosition(mouse_event);

    }

    Reply
  3. chikalin

     /  May 20, 2009

    Except it seems to do it for all the images on my page, regardless how much i change

    imgSmallFlag String _t
    imgLargeFlag String _l

    and the images its doing it do doesn’t even have the “_” in the filenames…

    Reply
    • Kyle Peterson

       /  May 21, 2009

      Could you post the entire snippet you’re using?

      Reply
      • ethab

         /  January 19, 2012

        Hi, I’m a real newbe at this and the script is exactly what I was looking for but as chikalin says it happens to all images on the page. I’ve read all replys here but can’t see where you answered this..any help would be appreciated

  4. robsuisted

     /  May 23, 2009

    Thanks Kyle!
    Is there any way to add a simple line of static text to the bottom of the image box?
    Many thanks
    Rob

    Reply
    • Kyle Peterson

       /  May 28, 2009

      Inside the image load event (which is inside the setPopup function), you could update the line below to always append some extra markup if you’d like.

      Original line: $(popup).empty().append(this);

      Changed to: $(popup).empty().append(this).append(“<div>Static text</div>”);

      Reply
  5. Good job. I was just creating something similar in jQuery, then I found this! Excellent!

    Reply
  6. how do i change the positioning of it coming onto screen? I just wanted it centered on screen… i have a large vertical picture that when hovered it adds picture above arrow and then you can only see half of image because it’s too high… the image is in a scrollable box if that makes any difference…
    http://www.clstudioinc.com/_V2/services.php

    Reply
    • Kyle Peterson

       /  September 18, 2009

      You probably want more of a lightbox type plugin since you’re trying to display a large image and you want it centered on the screen.

      Reply
    • wolf

       /  January 21, 2010

      just try replacing

      “//Create our popup element
      popup = $(“”)
      .css(settings.popupCSS)
      .attr(“id”, settings.popupId)
      .css(“position”, “absolute”)
      .appendTo(“body”).hide();

      //Attach hover events that manage the popup
      $(this)
      .hover(setPopup)
      .mousemove(updatePopupPosition)
      .mouseout(hidePopup);”

      with

      “//Create our popup element
      popup = $(“”)
      .css(settings.popupCSS)
      .attr(“id”, settings.popupId)
      .css(“position”, “absolute”)

      .css(“left”, document.getElementById(‘wrapper’).offsetLeft – 502)
      .css(“top”, document.getElementById(‘wrapper’).offsetTop)

      .appendTo(“body”).hide();

      //Attach hover events that manage the popup
      $(this)
      .hover(setPopup)

      //.mousemove(updatePopupPosition)
      //.mouseout(hidePopup);”

      note: I have also outcommented the mousemove and mouseout function

      ……………………………………………
      Hi Kyle, great job! Thank YOU!

      Reply
      • wolf

         /  January 21, 2010

        the “wrapper” refers to the div layer of course, and “502” was just my initial value to set it off accordingly.

        you can of course add or subtract any needed offset value needed here:

        .css(“left”, document.getElementById(‘wrapper’).offsetLeft – 502) // add or subtract any value needed to position it
        .css(“top”, document.getElementById(‘wrapper’).offsetTop – 0 ) // same here…

      • wolf

         /  January 21, 2010

        and out-comment the update for the position (sorry, forgot this):

        .bind(“load”, {thumbImage: this}, function(event)
        {
        //Only display the larger image if the thumbnail is still being hovered
        if ($(event.data.thumbImage).data(“hovered”) == true) {
        $(popup).empty().append(this);
        //updatePopupPosition(event);
        $(popup).show();
        }
        $(event.data.thumbImage).data(“cached”, true);
        })
        .attr(“src”, fullImgURL);

        //If no image has been loaded yet then place a loading message
        if ($(this).data(“cached”) != true) {
        //$(popup).append($(settings.loadingHtml));
        $(popup).show();
        }

        //updatePopupPosition(event);

      • devin

         /  June 28, 2013

        throwing error of popup undefined. object doesn’t support getelementbyid…

        thoughts?

  7. Hey excellent work, this was just what I needed. I’ve added it to my free plugin and it works great.

    I was sure to keep your credits in tact as well just so you know.

    Jared

    Reply
  8. Jieva

     /  October 27, 2009

    Great job.

    Is it possible to center de larger image above the thumbnail. I’m trying to recreate this: http://www.derk.eu/projecten.html. Is thing that it’s possible with this plugin. But how to do this.

    Jieva

    Reply
  9. Danna

     /  December 3, 2009

    Kyle, I like you!

    Reply
  10. Kourosh

     /  December 4, 2009

    Hi,
    I have used it within my news ticker but it works only for those images which appear in the list first time the page is loaded it does not work for those images which appear in the news ticker later here is my code. and many thanks for your help.

    $(document).ready(function(){

    $(“img”).thumbPopup({
    imgLargeFlag: “_l”
    });

    var speed = 1500;
    var pause = 4000;

    interval = setInterval(newsticker, pause);

    function newsticker()
    {
    last = $(‘ul#listticker li:last’).hide().remove();
    $(‘ul#listticker’).prepend(last);
    $(‘ul#listticker li:first’).slideDown(speed);

    last2 = $(‘ul#listticker2 li:last’).hide().remove();
    $(‘ul#listticker2’).prepend(last2);
    $(‘ul#listticker2 li:first’).slideDown(“slow”);
    }

    });

    Reply
  11. Kourosh

     /  December 8, 2009

    Thank you very much for your advice,
    I used live event as following but the image does not disappear and stay there for ever.

    $(“img”).live(“mouseout”, function(){
    $(this).thumbPopup({
    imgLargeFlag: “_l”
    });
    });

    thanks again.

    Reply
  12. Kourosh

     /  December 8, 2009

    I am sorry the code was this, and previous code was not correct.

    $(“img”).live(“mouseover”, function(){
    $(this).thumbPopup({
    imgLargeFlag: “_l”
    });
    });

    Reply
    • Hi,

      Try with this piece of code that modifies the plugin:

      Find in the code of jquery.thumbhover.js the lines when the events is attached and replace this code with:

      //Attach hover events that manage the popup
      $(this)
      .live(‘hover’, setPopup)
      .live(‘mousemove’, updatePopupPosition)
      .live(‘mouseout’, hidePopup);

      This code mantains the events always in page, even when the DOM have been modified and added new photos via ajax for example

      Reply
  13. Jonathan

     /  December 13, 2009

    Hi Kyle and thanks for sharing this nice script with us.

    I display the thumbnail it in a ‘dialog’ popup and the original picture is quite big. When hovering the thumbnail, the script fires and the picture appears but starts displaying from outside of the navigator windows.

    I tried using the margin-top property to lower it but then, smaller pictures appear to low in the screen.

    I’m not very familiar with CSS, but is there a way to combine dialog popup with your script and avoid this effect? Is there a way to define more than 1 “popupCSS” style properties ?

    Thanks again for the hard work.

    Reply
  14. Hi, I’m looking to use this script.
    My problem is that my “thumb tag” is at the begining of the filename, not at the end.
    and the large images have no common tags. My system already has over 2300 images and I’m quite hesitant to change my filename usage.

    Large: image.jpg
    small: tmb_image.jpg

    So HOW do I call my filenames using this script ?

    Reply
  15. Aaron

     /  February 3, 2010

    Great plugin. I wanted a short delay for the popup so I integrated it with another plugin called hoverIntent: http://cherne.net/brian/resources/jquery.hoverIntent.html… between the two of them it’s exactly what I wanted.

    Reply
  16. Raffaele

     /  February 19, 2010

    I have a problem I wish use the script in a web page that contains a flash movie at the top of the page. When I move the mouse over the thum image the larger image appears under the flash movie!

    Someone can help?

    Thanks

    Reply
    • Kyle Peterson

       /  February 20, 2010

      Do you have the wmode transparent attribute set for the flash movie?

      Reply
      • Raffaele

         /  February 21, 2010

        I’ve set the attribute wmode on trasparent but the image in popup is still uder the flash movie.

  17. John C

     /  February 27, 2010

    Hey Kyle, how do I set it so that not all my images on the website page will use this script? for example my logo linking to my home page should not have a Loading… sign since I don’t want it to be a pop up.

    Reply
    • Kyle Peterson

       /  February 28, 2010

      You can limit which images it applies to in your selection using a class or whatever you can use to identify the unique pieces like so $(“div.gallery img.specialClass”).thumbPopup…

      Reply
  18. Hi,

    It seems that this is not working with PNG files (for the popups)?
    I want to make a different shape popup with a shadow and no background.

    Greetz,

    Reply
  19. Rob

     /  March 26, 2010

    Great plugin, thanks!

    I made a quick enhancement to add a caption beneath the popup image. If anyone else is interested, I added these settings:

    showCaption: false,
    captionText: “”,
    captionCSS: ‘padding:3px 5px; background:#000; color:#CCC;’

    Then in the setPopup() function, I added this:

    //Prepare the caption, if any
    var captionHtml = new String();
    if (settings.showCaption) {
    if (settings.captionText == ”) captionHtml = $(this).attr(“alt”);
    else captionHtml = settings.captionText;
    captionHtml = ” + captionHtml + ”;
    }

    And finally I changed your original line here:
    $(popup).empty().append(this);

    To this:
    $(popup).empty().append(this).append(captionHtml);

    Essentially this allows you to use the image’s alt text as a caption, or override it with your own text, and also set your own CSS for the caption. It’s turned off by default, so you’d have to set showCaption to true when you call it:

    $(‘.imagelink img’).thumbPopup({
    imgSmallFlag: ‘/sm/’,
    imgLargeFlag: ‘/md/’,
    showCaption: true
    });

    Anyway, it was just a quick addition I made, thought I’d share. Happy to send or post the full code if you’re interested. Thanks again!

    Rob

    Reply
    • Rob

       /  March 26, 2010

      Ok, it definitely stripped out some HTML from my comment. This line:
      captionHtml = ” + captionHtml + ”;

      Should be this:
      captionHtml = ‘<div style=”‘ + settings.captionCSS + ‘”>’ + captionHtml + ‘</div>’;

      Hopefully that translates better…

      Reply
  20. michael

     /  April 1, 2010

    can it be possible to redirect the path of the images?

    i can get it how this work

    $(function(){
    $(“img[src*=’_s.gif’]”).thumbPopup({
    imgSmallFlag: “_s”,
    imgLargeFlag: “_l”,

    });
    });

    [src*]

    what if need to use it on other directory ?

    thnx hope you can help me 😀

    Reply
    • Nikita

       /  April 1, 2010

      Hi!
      You could play with that code in the plugin on line 31:
      var fullImgURL = $(this).attr(“src”).replace(settings.imgSmallFlag, settings.imgLargeFlag);

      Also It’s great plugin, Thanks Kyle!

      Reply
  21. michael

     /  April 1, 2010

    ///
    $(this).attr(“src”).replace(settings.imgSmallFlag, settings.imgLargeFlag);
    //

    something like this …

    $(this).attr(“src=/admin/thumb”).replace(settings.imgSmallFlag, settings.imgLargeFlag);

    what you tink? nikita 😀 hope it will

    Reply
  22. Jim in SD

     /  April 8, 2010

    This is great code! Would love to be able to define the size of the pop-up image! Thanks for writing this!

    Reply
  23. srinivasulareddy

     /  May 23, 2010

    relly thanq very much

    thanks
    ———-
    P.srinivasula Reddy

    Reply
  24. vijay

     /  May 31, 2010

    Hi Kyle Peterson,

    Can we reduce the popup window image size?

    Thanks..

    Reply
    • Kyle Peterson

       /  May 31, 2010

      The popup window is as big as the popup images you decide to use.

      Reply
  25. Rej

     /  June 22, 2010

    I couldnt locate the source pllz help ..

    Reply
  26. Rej

     /  June 22, 2010

    was in despair .. now got it .. thanks

    Reply
  27. Ter

     /  August 26, 2010

    Hi..great plugin, but i have a little problem.

    The image is in the tag i am initializing, any idea how i can do this?

    i’ve tried:

    var fullImgURL = $(this).find(“img”).attr(“src”).replace(settings.imgSmallFlag, settings.imgLargeFlag);

    But it doesnt seems to work very well. At some occasion it shows and then hide imediately and sometimes it doesn’t even show or showing the wrong image.

    Is there a fix for this?

    Please advise.

    Thank you!

    Reply
  28. Ter

     /  August 26, 2010

    Sorry to recap my comments,

    basicaly i have soemthing like this:

    Apple

    Basically i want the pop up to show when i hover over the tag, so hovering over the text apple will maintain the thumbnail pop up too.

    Please help!

    Reply
  29. Ter

     /  August 26, 2010

    Ah..it converts my code to HTML.

    Basically an “A” tag wrapping around a text and image..

    Reply
  30. Robz

     /  October 30, 2010

    how can i set Height and Width propieties ???

    I already try this— popupCSS: {‘height’: ‘300px’, ‘width’: ‘200px’}

    Reply
    • Kyle Peterson

       /  November 2, 2010

      The popup will by default take the size of the image loaded into it. Make sure your style takes that into consideration.

      Reply
  31. huhu

     /  December 16, 2010

    How to make thumbPopup will working on .png format

    Reply
  32. It works like a cake …. Thanks for sharing it brother….

    Reply
  33. Hi Kyle.
    First of thanks for a great plugin, it was an exact match to what I was looking for and the freedom of customization is greatly appreciated.

    I have a little issue where the PopUpCSS expands say, 5-10 pixels too far.
    So basically what I have is my background (semi transparent black), the image and a solid black border.

    The image covers 9/10’s of the entire PopUpCSS and then there’s a little row of transparent black in the bottom.

    I put my WIP site in the “Website” form so if anyone doesn’t quite understand what I mean you can have a look and hover over the images under:

    “What has he done? -> Web”, there should be a whole bunch of the same thumbnail.

    Much love,
    Kapp.

    Reply
    • Excuse me for double posting but I took care of it.
      Since all of my thumbnails/large images are the same of the same size (60×60, 330×200) I simply hardcoded those values into the popupcss and it worked just fine.

      Silly me!

      Reply
  34. rufisdickler

     /  June 9, 2011

    Thanks, a great little solution.

    One question, I’m using the same image for the popup/zoom so I just left the smallflag and largeflag as blank.

    I expected, since the image has already loaded when it shows the thumbnail, the larger version would popup straight away (since it’s the same file) but it still shows loading….

    ?

    Reply
  35. the popup is not working on future images. I think there’s something wrong with binding the future images especially on ajax generation images. I try to use live(), but still not working.. any idea ???

    Reply
  36. James

     /  April 20, 2012

    Has anyone used this with a wordpress site? I can’t seem to get it working.

    Reply
  37. bug : move to mouse cursor with slowly an image edge the pop had shake.
    incase u have save as the demo page. and run it. it shows big movement.
    please visit that video : http://youtu.be/Oq99XHYemjk

    Reply
  38. MainDude

     /  September 27, 2012

    Hi, Please help me to use this script in case I have 3 or 4 image size i.e. I want to popup images:
    Small to large
    medum to large
    xsmall to large

    How do I do this?
    Currently I can only change from one attr to other.
    Please help . Thanks!

    Reply
  39. First, awesome plugin! I am using the same image as the thumb and the fullsize (since the thumb is constrained in the img tag), so I just removed the two flags from the code, and took out the string substritution from the fullImgURL assignment, and it works.

    I have encountered one problem though, and I had encountered it before I made the above changes. The popup div’s height seems to be consistently 4 pixels more than the height of the image, which leaves a strip of background at the bottom. I can’t figure out where this might be coming from. Any ideas?

    Reply
    • I would guess it’s coming from CSS. Is your image inline or block? Can you give me a URL to view the issue or create a jsfiddle?

      Reply
  40. Max Esquivel

     /  November 16, 2012

    Excellent script and thanks. I installed this on a website I am working on and have found a problem where the popup “flickers” on and off when I move the mouse pointer over the thumbnail image. Please atke a look at this video http://youtu.be/rWwFaTGuTkw

    I do have several other javascripts running on the page, including two jqueryui modal dialogs that are shown when clicking links, and a show/hide behaviour that may affect this directly. I have three divs of thumbnails, each placed exactly the same as the others. When the page loads one div is shown with show() and the other two are hidden with hide(). When you click on a specific link, another dive is shown and the other two are hide, etc.

    Your demo does not have this “flickering” effect, so I wonder what I may be doing to cause it. Ideas?

    Reply
  41. Fred

     /  January 17, 2013

    Hi Kyle,
    Thank you for the great plugin.
    I have some ghosting problems in Chrome (V24.0.1312.52). When you look at this screenprint you will notice some ghosting. This demo is with the original plugin and jquery 1.4.2. I tried 1.9.0 but that changed nothing. No other browsers show these ghosts. I cannot seem to reproduce it with your demo page.
    Any idea if this is a problem with Chrome, jQuery or the script?
    Kind regards,
    Fred

    Reply
  42. S.M.

     /  June 5, 2013

    This is awesome. Thank you very much for hours of work not to be done. Very neatly packed functionality.

    Reply
  43. This is exactly what I’m looking for to blow up thumb nails in an online store.
    It works exactly as I expect it to work in Google Chrome 31.0.1650.63 m, except it’s a little jumpy when I move the mouse around on the thumbnail.

    In IE 9.0.23 on first hover the blowups appear where they should then instantly disappear. On second hover and all subsequent hovers, the blowups appear a way off to the left (half off the screen and are very jumpy)

    In Firefox 26 is see “loading” flash very quickly but never see the large popup ever

    I’m staging the site I’m working on here —> http://www.ssscomputerconsulting.com/trickedtoys/store_billet_pull_handles.php

    Reply
  44. I’m not a jQuery guy but I stared at and fiddled with the code long enough to figure out my problem. There was something in the X Y positioning “if” statements that is not consistent across browsers so I just got rid of all the fluff that I didn’t need in that function in the jquery.thumbhover.js file and pared it down to what’s pasted below. I’m now using only the two “Offset” options at the top of that file to place the popups where I want them to appear in relation to the thumbnail locations regardless of the screen dimensions. It’s working fine for my needs now and is exactly the same in all three browsers. Thanks Kyle. Great work!!!

    function updatePopupPosition(event)
    {
    var windowSize = getWindowSize();
    var popupSize = getPopupSize();
    $(popup).css(“left”, event.pageX + settings.cursorLeftOffset);
    $(popup).css(“top”, event.pageY + settings.cursorTopOffset);
    }

    Reply
  45. Will

     /  February 12, 2015

    Thanks a lot! Needed a quick fix for a client and it worked wonderfully!

    Reply
  46. Lukas

     /  March 11, 2015

    Hi,
    iam trying this out on my intranet page.
    Is it possible to change the filter from “img” to something text related like or something else? i want to popout image X when i hover over text

    Reply
  1. 30 jQuery Tooltip Plugins To Enhance Your Web Design | Creative Urbia
  2. 30 jQuery Tooltip Plugins To Enhance Your Web Design | creativeurbia.com
  3. 30 Excellent jQuery Tooltip Plugins To Enhance The Style Of Your Website
  4. jQueryいろいろ « Webデザイン ホームページ制作 名古屋 豊橋 | creal クレアル
  5. 30 Плагинов для jQuery tooltips – всплывающие подсказки.
  6. takeHoのへなちょこ日記 - takeHoのへなちょこ日記 | takeHoのへなちょこ日記
  7. jquery plugin Website – Tarot's Design & Frontend Dev.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: