Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Magnifier (gallery-magnifier) on cdn

Last Updated: 02/16/11

+ 0 -

Jeff Craig

YUI Contributor

See 8 more by this user.

Created: 03/20/10
Last CDN Push: 12/5/12
Build Tag: gallery-2012.12.05-21-01
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.

Magnifier is a node plugin meant to be attached to img nodes to provide a window that zooms into that section of the image. It can be configured so that the viewport is either statically placed on the page, or it will follow the mouse pointer around the page.

The configuration object supports the following options:

zoom - A numeric value describing how much to zoom into the image
height - Height of the viewport
width - Width of the viewport
follow - Boolean value denoting if the viewport should follow the cursor
staticX - Only valid if follow is 'false', the X coordinate that should be applied to the viewport
staticY - Only valid if follow is 'false', the Y coordinate that should be applied to the viewport

Styling is applied through the class .yui3-magnifier-display which applies to the external bounding box of the viewport. When you leave the image, the style .yui3-magnifier-hidden is applied to this bounding box.

Code Sample

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.12.05-21-01'
}).use('node', 'gallery-magnifier', function(Y) {
 
    Y.one('#magnify-follow').plug(Y.Magnifier, {
        follow: true,
        height: 75,
        width: 75,
        zoom: 3
    });
 
    Y.one('#magnify-static').plug(Y.Magnifier, {
        follow: false,
        staticX: 750,
        staticY: 240,
        height: 150,
        width: 150,
        zoom: 4
    });
 
});

Forum Posts

Subject	Author	Date
Two issues with "magnifier"	Michael Hasenstein	04/1/10