Use your mouse cursor or finger to zoom and pan the images below.
Photos all by Dag Endre Opedal.
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.
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.
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.
Global options can be specified via the standard jQuery plugin interface or as data attributes on individual EasyZoom elements. Remember that camelCase options should be written as hyphen-separated attributes, for example the
preventClicks option would be defined on the element with the
||The text to display within the notice box while loading the zoom image.|
||The text to display within the notice box if an error occurs when loading the zoom image.|
||The time (in milliseconds) to display the error notice|
||Attribute to retrieve the zoom image URL from.|
||Prevent clicks on the zoom image link.|
||Callback function to execute when the flyout is displayed.|
||Callback function to execute when the cursor is moved while over the image.|
||Callback function to execute when the flyout is removed.|
.swap(standardSrc, zoomSrc, [srcset])