Demo
How To Use
$("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 |
CodeBit 
Mohd Waseem
/ April 20, 2009simply superb…………… thanks to save my project. might be i loose that project…….
mogadanez
/ May 8, 2009good 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);
}
Michał Marczak
/ November 16, 2011Just what i needed! Thanks! 🙂
chikalin
/ May 20, 2009Except 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…
Kyle Peterson
/ May 21, 2009Could you post the entire snippet you’re using?
ethab
/ January 19, 2012Hi, 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
robsuisted
/ May 23, 2009Thanks Kyle!
Is there any way to add a simple line of static text to the bottom of the image box?
Many thanks
Rob
Kyle Peterson
/ May 28, 2009Inside 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>”);
Jake Rutter
/ June 25, 2009Good job. I was just creating something similar in jQuery, then I found this! Excellent!
Swany
/ September 16, 2009how 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
Kyle Peterson
/ September 18, 2009You 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.
wolf
/ January 21, 2010just 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!
wolf
/ January 21, 2010the “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, 2010and 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, 2013throwing error of popup undefined. object doesn’t support getelementbyid…
thoughts?
Jared Ritchey
/ September 27, 2009Hey 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
Jieva
/ October 27, 2009Great 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
Danna
/ December 3, 2009Kyle, I like you!
Kourosh
/ December 4, 2009Hi,
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”);
}
});
Kyle Peterson
/ December 8, 2009Maybe look into the “live” event for jquery so you can bind it to future elements.
http://docs.jquery.com/Events/live#typefn
Kourosh
/ December 8, 2009Thank 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.
Kourosh
/ December 8, 2009I am sorry the code was this, and previous code was not correct.
$(“img”).live(“mouseover”, function(){
$(this).thumbPopup({
imgLargeFlag: “_l”
});
});
Jesus
/ January 18, 2011Hi,
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
Jonathan
/ December 13, 2009Hi 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.
Xander
/ January 22, 2010Hi, 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 ?
Aaron
/ February 3, 2010Great 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.
Raffaele
/ February 19, 2010I 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
Kyle Peterson
/ February 20, 2010Do you have the wmode transparent attribute set for the flash movie?
Raffaele
/ February 21, 2010I’ve set the attribute wmode on trasparent but the image in popup is still uder the flash movie.
John C
/ February 27, 2010Hey 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.
Kyle Peterson
/ February 28, 2010You 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…
YR
/ March 18, 2010Hi,
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,
Rob
/ March 26, 2010Great 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
Rob
/ March 26, 2010Ok, 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…
michael
/ April 1, 2010can 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 😀
Nikita
/ April 1, 2010Hi!
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!
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
Jim in SD
/ April 8, 2010This is great code! Would love to be able to define the size of the pop-up image! Thanks for writing this!
srinivasulareddy
/ May 23, 2010relly thanq very much
thanks
———-
P.srinivasula Reddy
vijay
/ May 31, 2010Hi Kyle Peterson,
Can we reduce the popup window image size?
Thanks..
Kyle Peterson
/ May 31, 2010The popup window is as big as the popup images you decide to use.
Rej
/ June 22, 2010I couldnt locate the source pllz help ..
Rej
/ June 22, 2010was in despair .. now got it .. thanks
Ter
/ August 26, 2010Hi..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!
Ter
/ August 26, 2010Sorry 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!
Ter
/ August 26, 2010Ah..it converts my code to HTML.
Basically an “A” tag wrapping around a text and image..
Robz
/ October 30, 2010how can i set Height and Width propieties ???
I already try this— popupCSS: {‘height’: ‘300px’, ‘width’: ‘200px’}
Kyle Peterson
/ November 2, 2010The popup will by default take the size of the image loaded into it. Make sure your style takes that into consideration.
huhu
/ December 16, 2010How to make thumbPopup will working on .png format
haijerome
/ March 27, 2011It works like a cake …. Thanks for sharing it brother….
Kasper
/ May 5, 2011Hi 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.
Kasper
/ May 5, 2011Excuse 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!
rufisdickler
/ June 9, 2011Thanks, 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….
?
Sunny Jay P. Sabuero
/ August 19, 2011the 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 ???
Sunny Jay P. Sabuero
/ August 19, 2011^_^ … i think i missed up something here.. i got the code fix.. 😀
vamsi krishna
/ July 25, 2012its simple. save as the demo page. and add the 6 large images. with the name of example1_l.jpg,example2_l.jpg,example3_l.jpg,example4_l.jpg,example5_l.jpg,example6_l.jpg
James
/ April 20, 2012Has anyone used this with a wordpress site? I can’t seem to get it working.
vamsi krishna
/ July 25, 2012bug : 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
MainDude
/ September 27, 2012Hi, 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!
ginfeatures
/ October 26, 2012First, 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?
Kyle Peterson
/ November 7, 2012I 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?
Max Esquivel
/ November 16, 2012Excellent 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?
Kyle Peterson
/ November 20, 2012Maybe try disabling some of the other scripts to see if one in particular is causing the issue. Can you make sure you are calling the plugin/applying it only once? You could try using Visual Event to see if there are any other hover events being attached to the elements (http://www.sprymedia.co.uk/article/Visual+Event+2).
Fred
/ January 17, 2013Hi 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
S.M.
/ June 5, 2013This is awesome. Thank you very much for hours of work not to be done. Very neatly packed functionality.
Sheff
/ January 4, 2014This 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
Sheff
/ January 5, 2014I’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);
}
Will
/ February 12, 2015Thanks a lot! Needed a quick fix for a client and it worked wonderfully!
Lukas
/ March 11, 2015Hi,
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