EasyZoom converts an image with parent link into an interactive zoom. To start you will need to include a recent version of jQuery (greater than 1.7) and either easyzoom.js for development or easyzoom.min.js for production.
The plugin does not rely on a specific HTML structure but the following markup is a sensible start:
<div class="zoom-container">
<a id="zoom-target" href="photos/zoom.jpg">
<img class="zoom-image" src="photos/normal.jpg" alt="" width="390" height="520" />
</a>
</div>Some basic CSS is necessary to ensure correct display and positioning of the enlarged image. An expanded and fully commented example is included within easyzoom.css.
/* Zoom parent */
.zoom-container {
position:relative;
}
/* Image to zoom */
#zoom-target {
position:relative; /* Not strictly necessary but useful for positioning the loading message */
display:block; /* This is very important, the element must have metrics to provide an area to catch events */
}
#zoom-target .fullsize-loading {
position:absolute;
z-index:150;
}
/* Zoom panel */
#zoom-panel {
position:absolute;
top:0;
left:410px;
width:390px;
height:520px;
overflow:hidden;
background:#fff;
z-index:200;
}
To activate the plugin pass an HTML element or selector into the jQuery factory function and call the
easyZoom() method upon it.
$('#zoom-target').easyZoom();To help EasyZoom fit easily into your website there are a number configurable options to adjust the plugin structure and appearance. The available options (and their defaults) are below:
var options = {
id: 'zoom-panel',
parent: 'body',
error: '<p class="zoom-error">There has been a problem attempting to loading the image.</p>',
loading: '<p class="fullsize-loading">Loading</p>',
cursor: 'crosshair',
touch: true
};