Image Zoom with Jquery

In this article, we will understand how to zoom the image by using jquery with the help of various examples. Image Zoom jQuery plugin that allows your user to zoom into an image using their mouse depending on the viewing device.

Example 1:

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  countdown timer using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jquery.com/jquery-3.5.1.min.js">    
        </script>                 
<style>
body { 
  font-family: 'Open Sans', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}	
html {
  height: 100%;
  margin: 0;
  width: 100%;
  color: #FFF;
  background: #000;
}
.center-align {
  display: table;
  height: 100%;
  overflow: hidden;
  text-align: center;
  width: 100%;
}
.center-align .wrapper {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
.center-align .content {
  display: -moz-inline-stack;
  display: inline-block;
  text-align: left;
}
h3 {
  font-family: inherit;
  font-weight: 700; 
  color: red;  
  letter-spacing: 1px;  
  font-size: 1.1em;
}
img { margin: 0 10px; }
body.revealviewer {
  overflow: hidden;
}
#fullscreencanvas {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  width: 100vw;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  background: white;
  z-index: 9000;
  pointer-events: none;
  display: block;
  transition: opacity .3s, visibility 0s .3s;
}
body.revealviewer #fullscreencanvas {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .5s, visibility 0s .0s;
}
#fullscreenimagearea {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#fullscreencanvas img {
  position: relative;
  cursor: pointer;
  transition: all .5s;
}
div#closeviewer {
  width: 35px;
  height: 35px;
  overflow: hidden;
  display: block;
  position: fixed;
  cursor: pointer;
  text-indent: -1000px;
  z-index: 100000;
  top: 10px;
  right: 10px;
}
div#closeviewer::before {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 6px;
  background: black;
  top: 50%;
  opacity: 0;
  margin-top: -3px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: transform .5s, opacity .5s;
}
div#closeviewer::after {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 6px;
  background: black;
  top: 50%;
  opacity: 0;
  margin-top: -3px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: transform .5s, opacity .5s;
}
body.revealviewer div#closeviewer::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 1;
}
body.revealviewer div#closeviewer::after {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  opacity: 1;
}
#fullimageloadingdiv {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  pointer-events: none;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  background: white;
}
#zoomioloadingdiv {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  pointer-events: none;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  background: white;
}
#fullimageloadingdiv .spinner {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
#zoomiocontainer {
  position: absolute;
  z-index: 9999;
  overflow: hidden;
  background: white;
  visibility: visible;
}
#zoomiocontainer img {
  width: auto;
  height: auto !important;
  position: absolute !important;
  display: block !important;
  cursor: move;
}
.disablepointer {
  pointer-events: none;
}
#zoomiocontainer.mobileclass {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
#zoomioloadingdiv .spinner {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
.thumbnails {
  cursor: zoom-in;
}
</style>
<body>
<div class = "background"> </div>
<div class  = ?zoom-container">
<div class = "zoom">
<img src = 'https://burst.shopifycdn.com/photos/forest-wildflowers_925x@2x.progressive.jpg'>
<h1> Example </h1>
<h2> Image hover with jquery </h2>		
</div>
	</div>
<script>
$(document).ready(function() {
$(".zoom").mousemove(function(e) {
zoom(e);
});
function zoom(e) {
		var x, y;
		var zoomer = e.currentTarget;
		if(e.offsetX) {
			offsetX = e.offsetX;
		} else {
			offsetX = e.touches[0].pageX;
		}
		if(e.offsetY) {
			offsetY = e.offsetY;
		} else {
			offsetX = e.touches[0].pageX;
		}
		x = offsetX/zoomer.offsetWidth*100;
		y = offsetY/zoomer.offsetHeight*100;
		zoomer.style.backgroundPosition = x+'% '+y+'%';
	}
});
</script>
</body>
</html>

Expalnation:

In the above example, we created an example of how to add zoom functionality in image. In this we use mouse hover to zoom the image.

Output:

Following is the output of this example.

Example 2:

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  countdown timer using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jquery.com/jquery-3.5.1.min.js">    
        </script>                  
<style>  
body { 
  font-family: 'Open Sans', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}	
.center-align {
  display: table;
  height: 100%;
  overflow: hidden;
  text-align: center;
  width: 100%;
}
.center-align .wrapper {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
.center-align .content {
  display: inline-block;
  text-align: left;
}
h3 {
  font-family: inherit;
  font-weight: 700; 
  color: red;  
  letter-spacing: 1px;  
  font-size: 1.1em;
}
img { margin: 0 10px; }
body.revealviewer {
  overflow: hidden;
}
#fullscreencanvas {
  position: fixed;
  width: 100%;
  height: 100%;
  width: 100vw;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  background: white;
  z-index: 9000;
  pointer-events: none;
  display: block;
  transition: opacity .3s, visibility 0s .3s;
}
body.revealviewer #fullscreencanvas {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .5s, visibility 0s .0s;
}
#fullscreenimagearea {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#fullscreencanvas img {
  position: relative;
  cursor: pointer;
  transition: all .5s;
}
div#closeviewer {
  width: 35px;
  height: 35px;
  overflow: hidden;
  display: block;
  position: fixed;
  cursor: pointer;
  text-indent: -1000px;
  z-index: 100000;
  top: 10px;
  right: 10px;
}
div#closeviewer::before {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 6px;
  background: black;
  top: 50%;
  opacity: 0;
  margin-top: -3px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: transform .5s, opacity .5s;
}
body.revealviewer div#closeviewer::before {
    transform: rotate(-45deg);
}
div#closeviewer::after {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 6px;
  background: black;
  top: 50%;
  opacity: 0;
  margin-top: -3px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: transform .5s, opacity .5s;
}
.center-align {
  display: table;
  height: 100%;
  overflow: hidden;
  text-align: center;
  width: 100%;
}
.center-align .wrapper {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
h3 {
  font-family: inherit;
  font-weight: bold;
  color: #CCC;
  font-size: 1.1em;
}
img  { margin: 0 10px; }
body.revealviewer {
  overflow: hidden;
}
#fullscreencanvas {
  position: fixed;
  width: 100%;
  height: 100%;
  width: 100vw;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  background: white;
  z-index: 9000;
  pointer-events: none;
  display: block;
  transition: opacity .3s, visibility 0s .3s;
}
body.revealviewer #fullscreencanvas {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .5s, visibility 0s .0s;
}
#fullscreenimagearea {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#fullscreencanvas img {
  position: relative;
  cursor: pointer;
  transition: all .5s;
}
div#closeviewer {
  width: 35px;
  height: 35px;
  overflow: hidden;
  display: block;
  position: fixed;
  cursor: pointer;
  text-indent: -1000px;
  top: 10px;
  right: 10px;
}
div#closeviewer::before  {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 6px;
  background: black;
  top: 50%;
  opacity: 0;
  margin-top: -3px;
  transition: transform .5s, opacity .5s;
}
div#closeviewer::after {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 6px;
  background: black;
  top: 50%;
  opacity: 0;
  margin-top: -3px;
  -webkit-transform: rotate(0deg)
  transform: rotate(0deg);
  transition: transform .5s, opacity .5s;
}
body.revealviewer div#closeviewer::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 1;
}
#fullimageloadingdiv  {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  pointer-events: none;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  background: white;
}
#zoomioloadingdiv {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}
#fullimageloadingdiv .spinner {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
#zoomiocontainer {
  position: absolute;
  z-index: 9999;
  overflow: hidden;
  background: white;
  visibility: visible;
}
#zoomiocontainer img {
  width: auto;
  height: auto !important;
  position: absolute !important;
  display: block !important;
  cursor: move;
}
.disablepointer {
  pointer-events: none;
}
#zoomiocontainer.mobileclass {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
#zoomioloadingdiv .spinner {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
.thumbnails {
  cursor: zoom-in;
}
</style>
<body>
<div class="center-align">
	<div class="wrapper">
		<div class="content">
			<div>
<h3 JjQuery Full Screen Image Viewer</h3>
<img src="300.jpg " class="thumbnails" data-scale="3">
<img src="400.jpg " class="thumbnails" data-scale="3">
<h3>jQuery Zoomio</h3>
<img src="500.jpg " class="thumbnails" data-scale="3">
<img src="600.jpg " class="thumbnails" data-scale="3">
			</div>
		</div>
	</div>
</div>
<script>
! function(i) {
    function e(i) {
        var e = Math.min(window.innerWidth / i.width, window.innerHeight / i.height);
        return e
    }
                var i = e(t);
                if (s.html('<img src="' + t.src + '" style="width:' + t.width * i + "px; height:" + t.height * i + 'px;" />'), l.css("visibility", "hidden"), o > 1) {
                    var n = s.find("img:eq(0)");
                    n.zoomio({
                        scale: o,
                        fixedcontainer: !0
                    })
                }
            }), t.src = c, s.data("$largeimage", n)
        })
    }
    i.fn.fullscreenimage = function(e) {
        var a = i.extend({}, o, e);
        return this.each(function() {
            var e = i(this);
            return e = e.is("img") ? e : e.find("img:eq(0)"), 0 == e.length || n.matches ? !0 : void t(e, a)
        })
    }
}(jQuery);
! function(i) {
    function t(i) {
        return {
            w: i.width(),
            h: i.height()
        }
        function o(o, c) {
        var r = c || a,
            u = l ? "click" : "mouseenter";
        o.off(u).on(u, function(a) {
            if ("visible" != n.css("visibility") || 1 != n.queue("fx").length || f != o) {
                f = o;
                var u, h = a,
                    a = h.originalEvent.changedTouches ? h.originalEvent.changedTouches[0] : h;
                if (1 == c.fixedcontainer) {
                    var v = o.offset();
                    u = {
                        left: v.left,
                        top: v.top
                    }
                } else u = {
                    left: e(o.get(0), "offsetLeft"),
                    top: e(o.get(0), "offsetTop")
                };
                var p = [a.pageX - u.left, a.pageY - u.top],
                    m = t(o),
                    g = r.w || m.w,
                    b = r.h || m.h;
                n.stop().css({
                    visibility: "hidden"
                });
                 function() {
        n = i('<div id="zoomiocontainer">').appendTo(document.body), s = i('<div id="zoomioloadingdiv"><div class="spinner"></div></div>').appendTo(document.body), l ? (n.addClass("mobileclass"), n.on("touchstart", function(i) {
            i.stopPropagation()
        }), i(document).on("touchstart.dismisszoomio", function() {
            d.$zoomimage && (s.css({
                visibility: "hidden"
            }), n.stop().animate({
                opacity: 0
            }, d.settings.fadeduration, function() {
                i(this).css({
                    visibility: "hidden",
                    left: "-100%",
                    top: "-100%"
                })
            }))
        })) : (n.on("mouseenter", function() {}), n.on("mousemove", function(i) {
            var t = d.$zoomimage,
                e = d.offset,
                o = [i.pageX - e.left, i.pageY - e.top],
                n = d.multiplier;
            t.css({
                left: -o[0] * n[0] + o[0],
                top: -o[1] * n[1] + o[1]
            })
        }), n.on("mouseleave", function() {
            s.css({
                visibility: "hidden"
            }), n.stop().animate({
                opacity: 0
            }, d.settings.fadeduration, function() {
                i(this).css({
                    visibility: "hidden",
                    left: "-100%",
                    top: "-100%"
                })
            })
}(jQuery);
jQuery(function () {
    $('img.thumbnails').fullscreenimage({
        scale: 2
    })
    $('.zoomio').zoomio({
        fadeduration: 500
    })
    $('.nolargeimg').zoomio({
        w: '500px',
        h: '400px'
    })
})
</script>
</body>
</html>

Expalnation:

In the above example, we created an example of how to add zoom functionality in image. In this when we click on the image the image pop is displayed.

Output:

Following is the output of this example.