Jquery Plugin: dcookorg_magnifier

This is a plugin, that builds on JQuery and JQueryUI, to allow running a magnifying glass over an image and see it magnified. It allows both moving the magnifying glass, and resizing it (which changes the magnification level). It is fully customizable. To see it in action, try these demos:

Minimal Usage Example

You need an image to magnify, and you'll usually set width and height to be some fraction of the images actual size. To make selecting it easier you will normally give it an id:

<img id="main_image" src="man_in_tree.big.jpg" width="210" height="280">
and then you attach the magnifier as follows:
This is normally done inside the "on DOM loaded" function of jquery.
You can test this minimal example.

By default the magnified view is inserted directly below the image being magnified, and it is 400x400. See the demos, or the inline documentation, for how to change these settings.

Other Functions

dcookorg_removeMagnifier() is the complement of dcookorg_magnifier(), to remove the magnifying glass. Pass it the same options array you gave to dcookorg_magnifier().

dcookorg_absPosition() is a small but useful function to position one DOM object relative to another, in absolute coords. For the moment it is inside dcookorg_magnifier.js to save creating another file dependency. Well-documented inline.


MIT license, meaning you are free to use it in both private and commercial projects, and free to adapt it however you wish.


Please download and host on your own server.


Released: 2010-04-19, 9.9Kb

The plugin comes in a single file, documented fairly well with a comment block at the top of the file: dcookorg_magnifier.js. It should reduce to about 2Kb if minimized. It is beta-quality (fairly well tested on all of FF3 (linux), FF3.5 (win), IE6, IE7, IE8 and Safari(win)).

Other required files: jquery, jqueryUI (at least the draggable and resizable components), and the jquery CSS file. See the demo file source for how to include the first two files from other servers. If you can drag the magnifying glass but cannot get any handles to resize it with then it means the css file is missing. You can get a css file from http://jqueryui.com/download


Released: 2010-04-19.

Bug Reports, Future Development And Helping Out

Contact me at darren at dcook.org. Putting "dcookorg_magnfier" in the subject should help get you past my spam filters.

If you find a problem please let me know a URL where I can try it out; also let me know your browser and which version of jquery and jqueryUI you are using. If you can let me know if your browser works fine with all the demos on this page, that will also help troubleshooting.

Let me know of any cool sites or demos you make using this plugin! And if you are a designer and want to snaz up the look of this page, be my guest!

This is my first jquery plugin, and the code could be more elegant. If you feel like improving please do! But be aware that it is easy to break. You need to test all combinations of: horizontal and vertical source images, and horizontal and vertical glass shapes. You also need to test with source image that is bigger and smaller than the view div (see demo4.html). And you need to test in at least FF3, IE6 and IE8.

The only development I am personally planning is reducing its filesize (and making a no-comment version), and minimizing the total size including its dependencies. E.g. building it on jquery alone, so jqueryUI is not needed.

Note that half the current code is to get around the fact that resizable containment is broken as of jqueryUI 1.8. Hopefully this will be fixed in jqueryUI 1.9, in which case a new smaller version will be possible.