jQuery Magnify Image on Hover Event – jQuery Zoom Plugins

In this tutorial, we learn that how to create magnify zoom effect on image hover like Ecommerce product website.

To Create magnifier it takes following steps:-

1. Add CSS file in head section xzoom.css
2. Add jQuery Plugin after jQuery xzoom.min.js
3. Add initialize JavaScript code at the bottom of page after xzoom.min.js

HTML

<div class="xzoom-container">
<img class="xzoom" id="xzoom-default" src="../img/javascript/01-medium.jpg" xoriginal="../img/javascript/01-big.jpg" />
  <div class="xzoom-thumbs mt-3">
    <a href="../img/javascript/01-big.jpg"><img class="xzoom-gallery" width="80" src="../img/javascript/01-thumb.jpg" xpreview="../img/javascript/01-medium.jpg"></a>
    <a href="../img/javascript/02-big.jpg"><img class="xzoom-gallery" width="80" src="../img/javascript/02-thumb.jpg" xpreview="../img/javascript/02-medium.jpg"></a>
    <a href="../img/javascript/03-big.jpg"><img class="xzoom-gallery" width="80" src="../img/javascript/03-thumb.jpg" xpreview="../img/javascript/03-medium.jpg"></a>
  </div>
</div>

JavaScript

<script type="text/javascript">
(function ($) {
$(document).ready(function() {
$('.xzoom, .xzoom-gallery').xzoom({zoomWidth: 400, title: true, tint: '#333', Xoffset: 15});
$('.xzoom2, .xzoom-gallery2').xzoom({position: '#xzoom2-id', tint: '#ffa200'});
$('.xzoom3, .xzoom-gallery3').xzoom({position: 'lens', lensShape: 'circle', sourceClass: 'xzoom-hidden'});
$('.xzoom4, .xzoom-gallery4').xzoom({tint: '#006699', Xoffset: 15});
$('.xzoom5, .xzoom-gallery5').xzoom({tint: '#006699', Xoffset: 15});

//Integration with hammer.js
var isTouchSupported = 'ontouchstart' in window;

if (isTouchSupported) {
//If touch device
$('.xzoom, .xzoom2, .xzoom3, .xzoom4, .xzoom5').each(function(){
var xzoom = $(this).data('xzoom');
xzoom.eventunbind();
});

$('.xzoom, .xzoom2, .xzoom3').each(function() {
var xzoom = $(this).data('xzoom');
$(this).hammer().on("tap", function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
var s = 1, ls;

xzoom.eventmove = function(element) {
element.hammer().on('drag', function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
xzoom.movezoom(event);
event.gesture.preventDefault();
});
}

xzoom.eventleave = function(element) {
element.hammer().on('tap', function(event) {
xzoom.closezoom();
});
}
xzoom.openzoom(event);
});
});

$('.xzoom4').each(function() {
var xzoom = $(this).data('xzoom');
$(this).hammer().on("tap", function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
var s = 1, ls;

xzoom.eventmove = function(element) {
element.hammer().on('drag', function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
xzoom.movezoom(event);
event.gesture.preventDefault();
});
}

var counter = 0;
xzoom.eventclick = function(element) {
element.hammer().on('tap', function() {
counter++;
if (counter == 1) setTimeout(openfancy,300);
event.gesture.preventDefault();
});
}

function openfancy() {
if (counter == 2) {
xzoom.closezoom();
$.fancybox.open(xzoom.gallery().cgallery);
} else {
xzoom.closezoom();
}
counter = 0;
}
xzoom.openzoom(event);
});
});

$('.xzoom5').each(function() {
var xzoom = $(this).data('xzoom');
$(this).hammer().on("tap", function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
var s = 1, ls;

xzoom.eventmove = function(element) {
element.hammer().on('drag', function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
xzoom.movezoom(event);
event.gesture.preventDefault();
});
}

var counter = 0;
xzoom.eventclick = function(element) {
element.hammer().on('tap', function() {
counter++;
if (counter == 1) setTimeout(openmagnific,300);
event.gesture.preventDefault();
});
}

function openmagnific() {
if (counter == 2) {
xzoom.closezoom();
var gallery = xzoom.gallery().cgallery;
var i, images = new Array();
for (i in gallery) {
images[i] = {src: gallery[i]};
}
$.magnificPopup.open({items: images, type:'image', gallery: {enabled: true}});
} else {
xzoom.closezoom();
}
counter = 0;
}
xzoom.openzoom(event);
});
});

} else {
//If not touch device

//Integration with fancybox plugin
$('#xzoom-fancy').bind('click', function(event) {
var xzoom = $(this).data('xzoom');
xzoom.closezoom();
$.fancybox.open(xzoom.gallery().cgallery, {padding: 0, helpers: {overlay: {locked: false}}});
event.preventDefault();
});

//Integration with magnific popup plugin
$('#xzoom-magnific').bind('click', function(event) {
var xzoom = $(this).data('xzoom');
xzoom.closezoom();
var gallery = xzoom.gallery().cgallery;
var i, images = new Array();
for (i in gallery) {
images[i] = {src: gallery[i]};
}
$.magnificPopup.open({items: images, type:'image', gallery: {enabled: true}});
event.preventDefault();
});
}
});
})(jQuery);
</script>

Example

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Title</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://smartlearningtutorials.com/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://smartlearningtutorials.com/css/xzoom.css" media="all" />
  </head>
  <body>
  <main>
  <section>
  <div class="xzoom-container">
  <img class="xzoom" id="xzoom-default" src="../img/javascript/01-medium.jpg" xoriginal="../img/javascript/01-big.jpg" />
    <div class="xzoom-thumbs">
      <a href="../img/javascript/01-big.jpg"><img class="xzoom-gallery" width="80" src="../img/javascript/01-thumb.jpg" xpreview="../img/javascript/01-medium.jpg"></a>
      <a href="../img/javascript/02-big.jpg"><img class="xzoom-gallery" width="80" src="../img/javascript/02-thumb.jpg" xpreview="../img/javascript/02-medium.jpg"></a>
      <a href="../img/javascript/03-big.jpg"><img class="xzoom-gallery" width="80" src="../img/javascript/03-thumb.jpg" xpreview="../img/javascript/03-medium.jpg"></a>
    </div>
  </div>
  </section>
  </main>
  <script src="https://smartlearningtutorials.com/js/jquery-3.2.1.min.js"></script>
  <script src="https://smartlearningtutorials.com/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://smartlearningtutorials.com/js/xzoom.min.js"></script>
  <script type="text/javascript">
  (function ($) {
  $(document).ready(function() {
  $('.xzoom, .xzoom-gallery').xzoom({zoomWidth: 400, title: true, tint: '#333', Xoffset: 15});
  $('.xzoom2, .xzoom-gallery2').xzoom({position: '#xzoom2-id', tint: '#ffa200'});
  $('.xzoom3, .xzoom-gallery3').xzoom({position: 'lens', lensShape: 'circle', sourceClass: 'xzoom-hidden'});
  $('.xzoom4, .xzoom-gallery4').xzoom({tint: '#006699', Xoffset: 15});
  $('.xzoom5, .xzoom-gallery5').xzoom({tint: '#006699', Xoffset: 15});

  //Integration with hammer.js
  var isTouchSupported = 'ontouchstart' in window;

  if (isTouchSupported) {
  //If touch device
  $('.xzoom, .xzoom2, .xzoom3, .xzoom4, .xzoom5').each(function(){
  var xzoom = $(this).data('xzoom');
  xzoom.eventunbind();
  });

  $('.xzoom, .xzoom2, .xzoom3').each(function() {
  var xzoom = $(this).data('xzoom');
  $(this).hammer().on("tap", function(event) {
  event.pageX = event.gesture.center.pageX;
  event.pageY = event.gesture.center.pageY;
  var s = 1, ls;

  xzoom.eventmove = function(element) {
  element.hammer().on('drag', function(event) {
  event.pageX = event.gesture.center.pageX;
  event.pageY = event.gesture.center.pageY;
  xzoom.movezoom(event);
  event.gesture.preventDefault();
  });
  }

  xzoom.eventleave = function(element) {
  element.hammer().on('tap', function(event) {
  xzoom.closezoom();
  });
  }
  xzoom.openzoom(event);
  });
  });

  $('.xzoom4').each(function() {
  var xzoom = $(this).data('xzoom');
  $(this).hammer().on("tap", function(event) {
  event.pageX = event.gesture.center.pageX;
  event.pageY = event.gesture.center.pageY;
  var s = 1, ls;

  xzoom.eventmove = function(element) {
  element.hammer().on('drag', function(event) {
  event.pageX = event.gesture.center.pageX;
  event.pageY = event.gesture.center.pageY;
  xzoom.movezoom(event);
  event.gesture.preventDefault();
  });
  }

  var counter = 0;
  xzoom.eventclick = function(element) {
  element.hammer().on('tap', function() {
  counter++;
  if (counter == 1) setTimeout(openfancy,300);
  event.gesture.preventDefault();
  });
  }

  function openfancy() {
  if (counter == 2) {
  xzoom.closezoom();
  $.fancybox.open(xzoom.gallery().cgallery);
  } else {
  xzoom.closezoom();
  }
  counter = 0;
  }
  xzoom.openzoom(event);
  });
  });

  $('.xzoom5').each(function() {
  var xzoom = $(this).data('xzoom');
  $(this).hammer().on("tap", function(event) {
  event.pageX = event.gesture.center.pageX;
  event.pageY = event.gesture.center.pageY;
  var s = 1, ls;

  xzoom.eventmove = function(element) {
  element.hammer().on('drag', function(event) {
  event.pageX = event.gesture.center.pageX;
  event.pageY = event.gesture.center.pageY;
  xzoom.movezoom(event);
  event.gesture.preventDefault();
  });
  }

  var counter = 0;
  xzoom.eventclick = function(element) {
  element.hammer().on('tap', function() {
  counter++;
  if (counter == 1) setTimeout(openmagnific,300);
  event.gesture.preventDefault();
  });
  }

  function openmagnific() {
  if (counter == 2) {
  xzoom.closezoom();
  var gallery = xzoom.gallery().cgallery;
  var i, images = new Array();
  for (i in gallery) {
  images[i] = {src: gallery[i]};
  }
  $.magnificPopup.open({items: images, type:'image', gallery: {enabled: true}});
  } else {
  xzoom.closezoom();
  }
  counter = 0;
  }
  xzoom.openzoom(event);
  });
  });

  } else {
  //If not touch device

  //Integration with fancybox plugin
  $('#xzoom-fancy').bind('click', function(event) {
  var xzoom = $(this).data('xzoom');
  xzoom.closezoom();
  $.fancybox.open(xzoom.gallery().cgallery, {padding: 0, helpers: {overlay: {locked: false}}});
  event.preventDefault();
  });

  //Integration with magnific popup plugin
  $('#xzoom-magnific').bind('click', function(event) {
  var xzoom = $(this).data('xzoom');
  xzoom.closezoom();
  var gallery = xzoom.gallery().cgallery;
  var i, images = new Array();
  for (i in gallery) {
  images[i] = {src: gallery[i]};
  }
  $.magnificPopup.open({items: images, type:'image', gallery: {enabled: true}});
  event.preventDefault();
  });
  }
  });
  })(jQuery);
  </script>
  </body>
  </html>

jQuery Magnify Image on Hover Event

Zoom on hover or enlarge to full screen image on mouse over. Learn how to use jQuery zoom or JavaScript Zoom to add image zooming images to give an indication that the image will zoom on mouse over. Creating an e-commerce website, especially a showcase, a website gallery, click, grab and toggle jQuery Zoom Effect.

jQuery Zoom Plugins image effect example

1. .xzoom, .xzoom-gallery
2. .xzoom2, .xzoom-gallery2
3. .xzoom3, .xzoom-gallery3
4. .xzoom4, .xzoom-gallery4
5. .xzoom5, .xzoom-gallery5

Magnifying glass for image zoom Example – .xzoom3, .xzoom-gallery3

Bootstrap 4 Ecommerce product jQuery magnify image on hover magnifier.