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

Create Smooth Image Zoom and Pan Effects With jQuery and CSS - EasyZoom
File Size: 1.9 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="css/easyzoom.css" />

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="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.

<script>
$('.easyzoom').easyZoom();
</script>

5. Available options and defaults.

$('.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 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 logs:

v2.5.0 (2017-02-15)

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.