Magnifier.js demo

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.

Licensed under the MIT License, © 2013 Mark Rolich

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:

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