Zoom Image jQuery Plugin

January 04, 2020 No comments jQuery Zoom Plugin Image

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


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:

<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>

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

<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"/>
      <g id="mag">
        <circle cx="0" cy="2" r="75" fill="none" stroke="rgba(0,0,0,0.5)" stroke-width="4"/>
      <image id="imgZoom" mask="url(#m1)" x="0" y="0" width="1200" height="1800" xlink:href="image/forest.jpg"></image>



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.

{{ message }}

{{ 'Comments are closed.' | trans }}