My jQuery magnify plugin

Huy Dinh — Thu, 04 Sep 2008 09:47:55 +0000

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:

PLAIN TEXT

JavaScript:

$("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:

PLAIN TEXT

JavaScript:

$("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.

Huy Dinh » magnify

My jQuery magnify plugin