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.
14 Comments until now
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.
@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!
@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!
@ca-phun: Your shuffle plugin is absolutely useless, but has an air of mad genius and boldness about it, and is amazingly inspirational
sorry to step on your toes, but it looks at though your link may be broken.
Doesn't seem to work with PNGs ? Could this be ? Thanks a lot
Ciaran
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.
This jQuery plugin works really well for landscape layout images, but fails on portrait layout images.
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
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.
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.
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!
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
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.
Add your Comment!