Zoom Image jQuery Plugin

1. Introduction

Zoom Image is a lightweight jQuery plugin designed to zoom a part of an image on cursor hover. The plugin used modern SVG libraries: MorphSVGPlugin and DrawSVGPlugin. Zoom Image plugin used mouse click to increase the magnification.

Zoom image jquery plugin

2. Plugin Overview

Library	Zoom Image
Author	Tom Miller
Licence	MIT Licence
Repository	GitHub
Dependencies	jQuery 1.3.1 or Latest version, Normalize CSS, MorphSVGPlugin JS and DrawSVGPlugin JS

Demo

3. How to install and use Zoom Image jQuery plugin

Follow these steps in order to install Zoom Image jQuery plugin.

1. Load the all necessary JS libraries:

<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--TweenMax JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

<!--MorphSVGPlugin-->
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>

<!--DrawSVGPlugin-->
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js"></script>

2. Create div panel that contains an image to zoom:

<div id="imgBox" class="group">

  <img class="img group" src="image/forest.jpg" />

  <div class="svgWrapper">

    <svg id="svgRoot" width="800" height="1200" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
      <defs id="defs">
        <mask id="m1">
          <circle id="masker" cx="0" cy="0" r="75" fill="#fff"/>
        </mask>
      </defs>
      <g id="mag">
        <circle cx="0" cy="2" r="75" fill="none" stroke="rgba(0,0,0,0.5)" stroke-width="4"/>
      </g>
      <image id="imgZoom" mask="url(#m1)" x="0" y="0" width="1200" height="1800" xlink:href="image/forest.jpg"></image>

    </svg>

  </div>

3. Include Zoom Image script:

var w = 800,
    h = 1200,
    offsetX = $('#imgBox').offset().left,
    scale = 1.5,
    scaling = false;

$('#imgBox').click(function(e) { 
  scaling = true;
  (scale<3.5) ? scale=scale*1.33 : scale=1.5;
  TweenMax.to('#imgZoom', 0.1, {attr:{width:w*scale, height:h*scale, x:offsetX*(scale-1)-e.pageX*(scale-1), y:-e.pageY*(scale-1)}, onComplete:function(){scaling=false;}});
});

$('#imgBox').mousemove(function(e) {
  if (!scaling){
    TweenMax.to('#mag',     0.3, {x:-offsetX+e.pageX, y:e.pageY});
    TweenMax.to('#masker',     0.3, {attr:{cx:-offsetX+e.pageX, cy:e.pageY}});
    TweenMax.to('#imgZoom', 0.3, {attr:{x:offsetX*(scale-1)-e.pageX*(scale-1), y:-e.pageY*(scale-1)}});
  }
});

$('#imgBox').mouseenter(function(e) {
  TweenMax.to(['#mag','#masker','#imgZoom'], 0.3, {alpha:1});
});

$('#imgBox').mouseleave(function(e) {
  TweenMax.to(['#mag','#masker','#imgZoom'], 0.3, {alpha:0});
});

$( window ).resize(function() {
  offsetX = $('#imgBox').offset().left;
});

4. Conclusion

In this article, we showcased Zoom Image jQuery plugin used to zoom image on cursor hover. This plugin can be used on eCommerce websites to present products in a fancy way. Zoom Image plugin has a clean code and is easy to integrate.