Highly Optimised jQuery Image Zoom Plugin – EasyZoom

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

Features:

• Easyzoom jQuery is highly optimized and easy to implement image zoom plugin.
• Supports on all modern devices and browsers.
• Fully customizable with CSS.

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: