Magnifier

Component ID

206924

Component name

Magnifier

Component type

module

Component security advisory coverage

not-covered

Downloads

802

Component created

Component changed

Component body

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:

/**
 *  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:

    $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?