Customizable jQuery Image Pan and Zoom Plugin - Easy Zoom

Customizable jQuery Image Pan and Zoom Plugin - Easy Zoom
File Size: 1.87 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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


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