JQuery Loupe for Drupal

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!!!

Post your comment

Comments

  • Chris 02/11/2012 2:58pm (4 years ago) Gravatar for Chris

    Updating for Drupal 7, where Imagecache has been moved into Core - use "image-style-magnify" class.

RSS feed for comments on this page | RSS feed for all comments

Copywrite © 2017 Kevin Phillips All rights are reserved.

Proudly supporting opensource software