Back to post

EasyZoom is a sophisticated, extremely optimized jQuery image zoom and panning plugin. EasyZoom supports all modern devices and is definitely customizable with CSS.

Features:

How to use it:

1. Include the Javascript easyzoom.js at the bottom of the web page.

<script src="path/to/easyzoom.js"></script>

2. Include the CSS easyzoom.css in the header of the page.

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

3. Add the basic HTML to the page.

<div class="easyzoom easyzoom--overlay">
  <a href="path/to/demo-1.jpg" alt="">
    <img src="path/to/demo-1.jpg" alt=""/>
  </a>
</div>

4. Initialize the plugin and we're ready to go. 

var $easyzoom = $('.easyzoom').easyZoom();

Important facts

** If you mention earlier max-width: 100% to global img through CSS then the zooming effect will not work. So please remove the max-width: 100% from the CSS or add the CSS code given below.

.easyzoom-flyout img {
  max-width: none !important;
}

** Also, the image size needs to be larger than the wrapper easyzoom, if the width of the wrapper is 400px then the image within this wrapper will need to be higher than 400px, otherwise, it will not work.

Plugin's default options:

Option Default value Description
loadingNotice "Loading image" The text to display within the notice box while loading the zoom image.
errorNotice "The image could not be loaded" The text to display within the notice box if an error occurs when loading the zoom image.
errorDuration 2500 The time (in milliseconds) to display the error notice
linkAttribute "href" Attribute to retrieve the zoom image URL from.
preventClicks true Prevent clicks on the zoom image link.
onShow $.noop Callback function to execute when the flyout is displayed.
onMove $.noop Callback function to execute when the cursor is moved while over the image.
onHide $.noop Callback function to execute when the flyout is removed.

Overlay

HTML structure

<div class="easyzoom easyzoom--overlay">
  <a href="path/to/demo-1.jpg">
    <img src="path/to/demo-1.jpg" alt=""/>
  </a>
</div>

Script

var $easyzoom = $('.easyzoom').easyZoom();

Adjacent

HTML structure

<div class="easyzoom easyzoom--adjacent">
  <a href="path/to/demo-1.jpg">
    <img src="path/to/demo-1.jpg" alt=""/>
  </a>
</div>

Script

var $easyzoom = $('.easyzoom').easyZoom();

Advance usage with Bootstrap

HTML structure

<div class="row for-adjacent">
  <div class="col-lg-6">
    <div class="easyzoom easyzoom--adjacent">
      <a href="path/to/demo-1.jpg">
        <img src="path/to/demo-1.jpg" alt=""/>
      </a>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="adjacent-div"></div>
  </div>
</div>

CSS

.adjacent-div{
  height: 100%;
  background: #EEE;
}

.for-adjacent{
  margin-left: -10px;
  margin-right: -10px;
}

.for-adjacent .col-lg-6{
  padding-left: 10px;
  padding-right: 10px;
}

Script

var $easyzoom = $('.easyzoom').easyZoom();

With thumbnail images

HTML structure

<div class="easyzoom easyzoom--overlay easyzoom--with-thumbnails">
  <a href="path/to/demo-1.jpg">
    <img src="path/to/demo-1.jpg" alt=""/>
  </a>
</div>

<ul class="thumbnails">
  <li>
    <a href="path/to/demo-1.jpg" data-standard="path/to/demo-1.jpg">
      <img src="path/to/demo-1.jpg" alt=""/>
    </a>
  </li>
  <li>
    <a href="path/to/demo-2.jpg" data-standard="path/to/demo-2.jpg">
      <img src="path/to/demo-2.jpg" alt=""/>
    </a>
  </li>
  <li>
    <a href="path/to/demo-3.jpg" data-standard="path/to/demo-3.jpg">
      <img src="path/to/demo-3.jpg" alt=""/>
    </a>
  </li>
</ul>

Script

var $easyzoom = $('.easyzoom').easyZoom();
// Setup thumbnails example
var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');

$('.thumbnails').on('click', 'a', function(e) {
  var $this = $(this);
  e.preventDefault();
  // Use EasyZoom's `swap` method
  api1.swap($this.data('standard'), $this.attr('href'));
});