I’ve been quite disappointed with some of the jQuery modules for Drupal so I thought I’d share a simple way to use the jQuery Loupe Library, which is a really lightweight powerful image magnifier that from what I can see is probaby the easiest way to add a simple image magnifier to any image on your site.

First of all you will need this very small file from http://jdbartlett.github.com/loupe/

Add this file to you theme directory and add it to your .info file along with your main js file

scripts[] = jquery.loupe.min.js
scripts[] = main.js

You will also need to install imagecache and associated modules

The way I did it was to create an imache preset called magnify and set the scale 100% for width and height.

Then in my css

img.imagecache-Magnify{
  width:25%;
  height:25%;
}

and in my main js file

Drupal.behaviors.Loupe = function(context) {
  $('.imagecache-Magnify').loupe({
    width: 500, // width of magnifier
    height: 500, // height of magnifier
  });

};

Any image that you want to apply the magnifier to, just use the image cache preset ‘magnify’

Remember to clear your cache!!!