My jQuery magnify plugin
by Huy Dinh on Sep.04, 2008, under Javascript
Inspired by Ca Phun (YeloTofu.com)'s love for jQuery and him providing useless plugins, I've decided to take my zoomer script a little further, by creating a jQuery magnifier plugin.
There are many similar magnifiers out there, but none actually lifts the magnifier out of the image... at least, none that I've seen. So, you've guessed it, mine does!
Have a look at the demo here and download it here.
Usage is simple:
-
$("img").magnify();
But you'd probably want to hide the image initially, wait for it to load, then apply the magnify and finally show it:
-
$("img").hide().load(function(){
-
$(this).magnify().fadeIn("fast");
-
});
One last thing: you will want to style the magnifying "glass" (#huy-magnifier) with the width and height and anything else you might want... such as a border!
After I wrote the script and showed it to Ca Phun, he said that jQuery already has a magnifier... but at the time of writing, it doesn't seem to be working.
23 Comments for this entry
Leave a Reply
-
Howdy. Welcome to Huy Dinh!
Thanks for dropping by! Feel free to join the discussion by leaving comments, and stay updated by subscribing to the RSS feed. See ya around!
September 4th, 2008 on 17:09
really nice plugin. this works much more smoothly than the other magnifiers I've seen out there. Adding a fadeOut for when you move off the image makes it smoother looking. Also, it would be nice to have an no-cursor option.
September 4th, 2008 on 22:18
@nelson: Thanks for your comment, the first I've received in a very long time *sob*.
I'm glad you like it - I did spend a lot of time optimising it for speed. I did have another version that is slightly faster than the current version, but it doesn't work in IE because of z-order issues.
It would be nice to hide the cursor, but only Firefox supports CSSs' cursor:none property... so the next best cursor is the crosshair - supported by all browsers!
September 5th, 2008 on 09:06
@huy: Glad you're using jQuery and that my "useless" plugins were the catalyst
cursor:none is not a CSS property; try cursor:default. It should give you the browsers default cursor for a particular element.
I am now on a mission to build the most "useful" plugin, ever! Wohoo!
September 5th, 2008 on 09:32
@ca-phun: Your shuffle plugin is absolutely useless, but has an air of mad genius and boldness about it, and is amazingly inspirational
November 2nd, 2008 on 23:29
sorry to step on your toes, but it looks at though your link may be broken.
November 6th, 2008 on 21:19
Doesn't seem to work with PNGs ? Could this be ? Thanks a lot
Ciaran
November 25th, 2008 on 22:26
There seems to be a bug in the demo... when you hover over an image, the script works fine; however once you hover over another image, the magnifier does not update to the new image; it keeps magnifying the first image you hovered over; just over the second image. Don't know if that makes sense to you.
December 4th, 2008 on 01:26
This jQuery plugin works really well for landscape layout images, but fails on portrait layout images.
February 4th, 2009 on 20:45
This is a fantastic effect, something that will solve a problem I have. Would you be able to include the .css in the download?
Thanks
February 18th, 2009 on 15:02
Really really nice plug-in I must say.
I'm wondering how ward would be to implement changing image on fly?
Something similar to this example:
http://www.magictoolbox.com/magiczoom/
Thanks, and once again GREAT PLUG-IN.
April 5th, 2009 on 08:49
Great magnifier. I am trying to get this to work in magento but I get stuck. Are you willing to shed your light on this.
Thanks.
April 11th, 2009 on 02:13
WOW! I know it has been a while since you wrote this, but I think it's still the only magnifier that works over the original image. And that's just what I'm looking for...THANKS!!!
Question: is there any way to embed the magnified area in a graphic like a magnifying glass so it looks like a user is holding the mag glass to see the zoomed section?
(I hope the answer is yes!)
Thanks again!
April 19th, 2009 on 00:25
I tried using your magnifier on a large image that has small detail, it would be useful to help see the small detail but it is not magnifying enough. The magnified image is the same size as the original image! This is the page: http://www.liberatiperlaliberta.ilbello.com/index.php?mod=02_Percorso
May 22nd, 2009 on 13:50
Odd...whenever I try to use this it just seems to make my images disappear. I guess the hide is working
They just never get show again. Any ideas?
BTW I love your approach to this. Yes there are other zooms out there, but none as elegant looking.
June 27th, 2009 on 10:04
The more I use jQuery, the more I like it! Until now, I'd limited my use of effects (eye candy) to some basic fades. On a new website I'm working on, the designer wants more pizazz so I've been playing with some of the jQuery UI tools, namely the Magnifier which produces a fisheye lens effect similar to Apple's Dock (OS X or later). In short, a line of icons is magnified, as if a fisheye lens were passing over it, as the user moves their mouse near the icons. Beyond looking cool, the effect is a bonus for usability -- at least for the average user.
July 19th, 2009 on 05:49
Is there anyway to give magnify effect for the entire web page including text..
August 6th, 2009 on 15:18
Nice plug in but it goes wrong quite quickly if either a) there are lot of images in a scrollable error b) you rapidly move the mouse out of the magnify area. Both cases leave the magnified area viewable but the mouse it no longer in the picture.
August 18th, 2009 on 16:08
Hello Huy, Demo is cool but not working in my environment. Does it work with jQuery 1.3.2 ?
August 20th, 2009 on 00:00
great script. I found the movement to be off target though. i replaced the lines setting zoomImage.css with the following to fix this:
left:((e.pageX - thumbImageOffsetX) / sensorWidth) * -((zoomImageWidth ) ) + zoomImageContainerWidth/2,
top:((e.pageY - thumbImageOffsetY) / sensorHeight) * -(zoomImageHeight) + zoomImageContainerHeight/2
Now it is perfect for me. thanks
August 20th, 2009 on 13:03
Awesome, really amazing. Works like the Flash one, but no need to use Flash which is a good thing in my reckoning!
December 16th, 2009 on 06:58
Huy,
I have incorporated your magnifier Jquery in my application. Its running fine also in few cases.
But when some event happens or if Image (which i want to zoom) is changed, The Image never get loaded on th page. This behaviour is random.
Please help. If I could see the image i know the magnifier will work properly
January 26th, 2010 on 18:08
Hi,
Great tool thanks for you effort. Found bug for disappearing images that are square. Simple fix is to change line 66
from
if (this.width() > this.height()) {
to
if (this.width() >= this.height()) {
Hope this helps someone with the same problem.
Thanks.
March 19th, 2010 on 17:28
Hi,
Liked this and thought to ask : Can his be used for text magnification as well?
Sarah