Customizable jQuery Image Pan and Zoom Plugin - Easy Zoom

Easy Zoom is a jQuery plugin inspired by easyzoom plugin that allows to smoothly pan and zoom an image using your mouse cursor or finger.

Features:

• Highly customizable with CSS and options.
• Works nicely with touch devices like iPhone, iPad, etc.
• AMD and CommonJS compatible.
• Supports legacy and modern browsers.

See also:

• jQuery Plugin For Zoom & Pan Image Cropping - jQCrop
• Smart jQuery Pan and Zoom Plugin - Smart jQuery Zoom
• jQuery Plugin For Panning and Zooming Any Elements - panzoom

Basic Usage:

1. Load the Easy Zoom jQuery plugin core stylesheet in the page.

<link rel="stylesheet" href="css/easyzoom.css" />

2. Markup Html structure. Displays the large version of your image in an overlay interface.

<div class="easyzoom easyzoom--overlay"> 
<a href="path/to/Large.jpg"> 
<img src="path/to/standard.jpg" alt="" width="640" height="360" /> </a> 
</div>

3. The javascript. The EasyZoom plugin is instantiated as any other jQuery plugin and an instances API can be accessed via element data.

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

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

4. Options.

// The text to display within the notice box while loading the zoom image.
loadingNotice: 'Loading image',

// The text to display within the notice box if an error occurs loading the zoom image.
errorNotice: 'The image could not be loaded',

// Prevent clicks on the zoom image link.
preventClicks: true,

// Callback function to execute when the flyout is displayed.
onShow: undefined,

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

Change log:

2014-07-16

• update to 2.2.0

---

This awesome jQuery plugin is developed by i-like-robots. For more Advanced Usages, please check the demo page or visit the official website.