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.
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:
<!--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.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}