Magnifier.js

Magnifier.js is a Javascript library enabling magnifying glass effect on an images.

Features

Zoom in / out functionality using mouse wheel
Magnified image can be displayed in the lens itself or outside of it in a wrapper
Attachment of user defined functions for thumbnail entering, moving and leaving and image zooming events
Display loading text while the large image is loading, and switch to lens once its loaded

Magnifier.js uses Event.js as a cross-browser event handling wrapper, which is available at Github and JSClasses.org

Works in Chrome, Firefox, Safari, IE 7, 8, 9 & 10.

Source code is available at Github

Magnifier.js can be used for both single and multiple images, as well as galleries using dynamic option setting on gallery navigation:

Birds of America

by John James Audubon

At a glance

Include magnifier.css in the head section of the HTML document

<link rel="stylesheet" type="text/css" href="magnifier.css">

Let's create sample HTML markup

<div>
    <a class="magnifier-thumb-wrapper" href="http://en.wikipedia.org/wiki/File:Starry_Night_Over_the_Rhone.jpg">
        <img id="thumb" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/200px-Starry_Night_Over_the_Rhone.jpg">
    </a>
    <div class="magnifier-preview" id="preview" style="width: 200px; height: 133px">Starry Night Over The Rhone<br>by Vincent van Gogh</div>
</div>

The image we need to apply magnifying glass effect should wrapped in a block-level element with relative position, so we assign magnifier-thumb-wrapper CSS class defined in magnifier.css to the image wrapping link. The element where we show magnified image should have magnifier-preview CSS class.

Include Javascript libraries and initialize magnifier

<script type="text/javascript" src="Event.js"></script>
<script type="text/javascript" src="Magnifier.js"></script>
<script type="text/javascript">
var evt = new Event(),
    m = new Magnifier(evt);
</script>

Set magnifier options

m.attach({
    thumb: '#thumb',
    large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/400px-Starry_Night_Over_the_Rhone.jpg',
    largeWrapper: 'preview'
});

Result (mouseover to magnify)

Starry Night Over The Rhone
by Vincent van Gogh

Magnifier.js supports data attributes, the code above could be written in the following way:

<div>
    <a class="magnifier-thumb-wrapper" href="http://en.wikipedia.org/wiki/File:Starry_Night_Over_the_Rhone.jpg">
        <img id="thumb" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/200px-Starry_Night_Over_the_Rhone.jpg"
        data-large-img-url="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/400px-Starry_Night_Over_the_Rhone.jpg"
        data-large-img-wrapper="preview">
    </a>
    <div class="magnifier-preview" id="preview" style="width: 200px; height: 133px">Starry Night Over The Rhone<br>by Vincent van Gogh</div>
</div>

and the Javascript

m.attach({thumb: '#thumb'});

It's possible to attach magnifier to multiple images assigning class name to thumb property and providing large images URL via data-large-img-url data attribute

<img src="http://example.com/image1.jpg" class="img" data-large-img-url="http://example.com/large-image1.jpg">
<img src="http://example.com/image2.jpg" class="img" data-large-img-url="http://example.com/large-image2.jpg">
<img src="http://example.com/image3.jpg" class="img" data-large-img-url="http://example.com/large-image3.jpg">

m.attach({
    thumb: '.img',
    largeWrapper: 'preview'
});

Let's make preview window larger (2x of the size of the thumbnail)

...
<div class="magnifier-preview" id="preview" style="width: 400px; height: 267px">Starry Night Over The Rhone<br>by Vincent van Gogh</div>
...

And set zoom level to 3

m.attach({
    thumb: '#thumb',
    large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/1200px-Starry_Night_Over_the_Rhone.jpg',
    largeWrapper: 'preview',
    zoom: 3
});

Starry Night Over The Rhone
by Vincent van Gogh

Magnifier.js automatically increases zoom level if preview window size is bigger than thumbnail size (in our example by 2, so actual zoom level is 6)

Magnifier.js can display magnified image inside lens:

m.attach({
    thumb: '#thumb',
    large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/1200px-Starry_Night_Over_the_Rhone.jpg',
    mode: 'inside',
    zoom: 3,
    zoomable: true
});

Note that in this case there's no need to specify large image wrapper

Deeper view

The complete list of magnifier options

Property	Data attribute	Type	Description	Required	Default
thumb		string	ID or class of the image element to magnify preceded by "#" or "."	yes
large	data-large-img-url	string	large image URL	yes
largeWrapper	data-large-img-wrapper	string	ID of the element where large image will be appended	yes (if mode is 'outside')
zoom	data-zoom	int	initial zoom level	no	2
mode	data-mode	string	'inside' or 'outside', specifies whether to display magnified image inside / outside lens	no	outside
zoomable	data-zoomable	bool	enable zoom in / out using mouse wheel	no	false
onthumbenter		callback	function to call on thumbnail enter event	no
onthumbmove		callback	function to call on thumbnail move event	no
onthumbleave		callback	function to call on thumbnail leave event	no
onzoom		callback	function to call on zoom event	no

Besides of attach method, all of the options except thumb and large can be set globally at magnifier initialization, and then overridden individually using attach method

m = new Magnifier(evt, {
    zoom: 3,
    zoomable: true,
    ...
});

Also, you can omit parameters on subsequent calls of attach method once you set them up (whether globally or not), Magnifier.js uses values from the last found options setup (for zoom and mode it uses only global or default value), keeping in mind that thumb should be always specified in the options object (if large is not set, thumbnail image will be used instead).

Once called, user defined event handlers receive as an argument the object with the following properties:

onthumbenter, onthumbmove and onthumbleave

Property	Description
thumb	current thumbnail DOM element
lens	lens DOM element
large	large image DOM element
x	mouse X coordinate
y	mouse Y coordinate

onzoom

Property	Description
thumb	current thumbnail DOM element
lens	lens DOM element
large	large image DOM element
x	mouse X coordinate
y	mouse Y coordinate
zoom	current zoom level
w	lens width
h	lens height

An example of user defined functions attachment

m.attach({
    thumb: '#thumb2',
    large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/1600px-Starry_Night_Over_the_Rhone.jpg',
    largeWrapper: 'preview2',
    zoom: 2,
    zoomable: true,
    onthumbenter: function () {
        document.getElementById('enter').innerHTML = 'Mouse enter';
        document.getElementById('leave').innerHTML = '';
        document.getElementById('zoom').innerHTML = '';
    },
    onthumbmove: function () {
        document.getElementById('move').innerHTML = 'Mouse move';
    },
    onthumbleave: function () {
        document.getElementById('enter').innerHTML = '';
        document.getElementById('move').innerHTML = '';
        document.getElementById('zoom').innerHTML = '';
        document.getElementById('leave').innerHTML = 'Mouse leave';
    },
    onzoom: function (data) {
        document.getElementById('zoom').innerHTML = 'Zoom: ' + data.zoom;
    }
});

Starry Night Over The Rhone
by Vincent van Gogh