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