A jquery image magnifier, based on the dojotoolkit Magnifier utility. From http://dojotoolkit.org/~dante/jquery/Magnifier.html

To use:

theme('magnifier', $image_path, $args);

Specify $args passed as an array of optional elements, using the following:

<?php
/**
 *  Displays an image with a magnifier glass box.
 *
 *  @param $image_path
 *  This is the filepath to the image to display.
 *  @param $args
 *  An array with optional arguments:
 *    'magnify' => 4,           //  the zoom magnification scale. defaults to 4
 *    'glass_size' => 125,      //  the size of the glass box, which will be a square to zoom. defaults to 125
 *    'imagecache' => '',       //  the imagecache setting to use for the smaller image. if this is set, then $image_path
 *                              //  will be used for the image in the glass box only, and the imagecache'd version will be
 *                              //  used in the main page display.
 *    'image' => '',            //  the image path of the larger image displayed in the glass when zooming.
 *                              //  if not specified, this defaults to $image_path. You don't need this when using imagecache.
 *    'width' => NULL,          //  the display width of the smaller image -- if specified, forces a browser image scale
 *                              //  you generally don't need this when using imagecache. use this or height when you want to use the same image for zoom
 *    'height' => NULL,         //  the display height of the smaller image -- if specified, forces a browser image scale
 *                              //  you generally don't need this when using imagecache. use this or height when you want to use the same image for zoom
 *    'title' => '',            //  the title attribute
 *    'alt' => '',              //  the alt attribute
 *    'attributes' => array(),  //  additional attributes to send, as 'rel' => 'rel_path'
 *    'id' => FALSE,            //  if TRUE, then force magnifier to resolve as an ID (slightly faster, but may result in more
 *                              //  javascript if multiple images on screen). additionally, if this is a string, then the ID
 *                              //  of the image will be set to that string. Note that ID will always be set to true if an
 *                              //  imagecache is used, or 'image' is set, so you won't have to set this attribute in that case.
 *  @return
 *  returns the magnified image as output
 */
?>

An example image is at http://erikgecas.com/node/14 which is created by the following in the node-image.tpl.php file:

<?php
    $args
= array(
     
'magnify' => 8,
     
'glass_size' => 400,
     
'imagecache' => 'painting-2005-full',
     
'title' => $node->title,
     
'alt' => $node->title
   
);
    print
theme('magnifier', $field_image[0]['filepath'], $args);
?>

TODO:
integrate with views?

Project Information

Downloads