EasyZoom is an elegant, highly optimised jQuery image zoom and panning plugin based on the original work by Alen Grakalic. EasyZoom supports touch-enabled devices and is easily customisable with CSS.

Download View project on GitHub

Examples

Use your mouse cursor or finger to zoom and pan the images below.

Overlay

Photo by Dag Endre Opedal (original).

On mouse down

Photo by Dag Endre Opedal (original).

Adjacent

Photo by Dag Endre Opedal (original).

Setup

HTML

EasyZoom does not rely on a specific markup structure but it is important that the EasyZoom target element (<div class="easyzoom">) only contains a link to the large image and the smaller image. Any other elements within the EasyZoom target must not affect its layout, E.G. elements that are positioned absolutely.

<div class="easyzoom">
    <a href="images/zoom.jpg">
        <img src="images/standard.jpg" alt="" />
    </a>
</div>

CSS

The EasyZoom target element must 'shrink wrap' the smaller image, this can be achieved either by floating it or by displaying it as an inline block. Extra white space below the image (usually caused by the line box the image sits within) can be removed either by displaying it at block level or changing its position within the line box.

Take a look at the included easyzoom.css for more information on styling EasyZoom.

/* Shrink wrap strategy 1 */
.easyzoom {
    float: left;
}
.easyzoom img {
    display: block;
}


/* Shrink wrap strategy 2 */
.easyzoom {
    display: inline-block;
}
.easyzoom img {
    vertical-align: bottom;
}

JavaScript

The EasyZoom plugin is instantiated as any other jQuery plugin and an instances API can be accessed via element data. EasyZoom is also AMD and CommonJS compatible.

// Instantiate EasyZoom plugin
var $easyzoom = $('.easyzoom').easyZoom();

// Get the instance API
var api = $easyzoom.data('easyZoom');

Options

Global options can be specified via the standard jQuery plugin interface.
The simple options can also defined as data attribute ( onShow and onHide excluded).

loadingNotice

The text to display within the notice box while loading the zoom image.
Default: "Loading image".

To use this option as data attribute you have to add the attribute data-loading-notice="Loading image"

errorNotice

The text to display within the notice box if an error occurs loading the zoom image.
Default:"The image could not be loaded".

To use this option as data attribute you have to add the attribute data-error-notice="The image could not be loaded"

errorDuration

The time (in milliseconds) to display the error notice. Default: 2500.

To use this option as data attribute you have to add the attribute data-error-duration="2500"

preventClicks

Prevent clicks on the zoom image link. Default: true.

To use this option as data attribute you have to add the attribute data-prevent-clicks="true"

startByMousedown

Start the zoom on mousedown instead of a hover. Default: false.

To use this option as data attribute you have to add the attribute data-start-by-mousedown="false"

onShow

Callback function to execute when the flyout is displayed. Default: undefined

Because you have to define a function this option is not availible as data attribute.

onHide

Callback function to execute when the flyout is removed. Default: undefined

Because you have to define a function this option is not availible as data attribute.

API

.show([MouseEvent|TouchEvent], [Boolean])

Displays the zoom image flyout. Optionally takes an instance of a mouse or touch event and can be set to only display the flyout if the mouse is over the target.

.hide()

Removes the zoom image flyout.

.teardown()

Removes all events and elements created and attached by EasyZoom.

.swap(standardSrc, zoomSrc, [srcsetStringOrArray])

Easily switch the standard and zoom image sources. To display retina images via the srcset attribute, use the optional srcsetStringOrArray argument.