Create Smooth Image Zoom and Pan Effects With jQuery and CSS - EasyZoom

EasyZoom is a lightweight and touch-compatible jQuery zoom plugin which allows you to zoom and pan an image using your mouse cursor or finger on touch devices.

Basic Usage:

1. Include the jQuery easyZoom plugin's CSS file in the head section of your web page.

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

2. Include jQuery library and the jQuery easyZoom plugin's script at the end of your web page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/easyzoom.js"></script> 

3. Add a link to the original image and wrap it in an easyZoom wrapper that will display an overlay for checking if the zoom image has already loaded.

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

4. Initialize the plugin with default options.

$(function(){
  $('.easyzoom').easyZoom();
});

5. Available options and callback functions

$('.easyzoom').easyZoom({

  // 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 when loading the zoom image.
  errorNotice: 'The image could not be loaded',

  // The time (in milliseconds) to display the error notice.
  errorDuration: 2500,

  // Attribute to retrieve the zoom image URL from.
  linkAttribute: 'href',

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

  // Callback function to execute before the flyout is displayed.
  beforeShow: $.noop,

  // Callback function to execute before the flyout is removed.
  beforeHide: $.noop,

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

  // Callback function to execute when the flyout is removed.
  onHide: $.noop,

  // Callback function to execute when the cursor is moved while over the image.
  onMove: $.noop
  
});

Changelog:

v2.6.0 (2022-12-30)

• Update

v2.5.3 (2020-05-15)

• Fix mixed up X and Y variables

v2.5.2 (2018-11-23)

• update

v2.5.1 (2018-10-04)

• User outer width of target element to calculate cursor position

v2.5.0 (2017-02-15)

• update

v2.4.0 (2016-04-19)

• update

v2.3.0 (2015-03-16)

• update

v2.2.1 (2014-09-16)

• Fix issue with relative mouse position being negative

---

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