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
<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 image could not be loaded".
.swap(standardSrc, zoomSrc, [srcset])