jQuery Simple Image Inner Zoom On Hover Plugin

Simple Image Zoom is the simplest jQuery solution to zoom in / zoom out on an image on mouseover.

image zoom plugin, inner zoom image jquery, jquery image zoom mobile friendly, click on the image to zoom, zoom image on hover javascript

A Vue Component For Magnifying An Inner Image Zoom Plugin

How to make use of it:

1. Add a CSS class “zoom” to your image.

<img class="zoom" src="1.jpg" alt="img">

2. Wrap the image in a container using the CSS class “zoomIn”.

<div class="zoomIn">
  <img class="zoom" src="1.jpg" alt="img">
</div>

3. CSS required for the “zoomIn” container.

.zoomIn {
  overflow: hidden;
  position: relative;
  z-index: 100;
  cursor: crosshair;
}

4. Include the required jQuery library at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

5. Javascript to enable the internal zoom effect.

$(document).ready(function () {
  var $container = $('.zoomIn');
  var $image = $container.find('.zoom');
  var $imageW = $image.width();
  var $imageH = $image.height();
  var $containerW = $container.innerWidth($imageW);
  var $containerH = $container.innerHeight($imageH);
  var $imageClone = $image.clone();
  var $imageLarge = $imageClone.width($imageW * 2);
  var imageLargeW = $imageLarge.width();
  var imageLargeH = $imageLarge.height();
  $image.width($imageW).height($imageH);
  $('.zoomIn').on({
    mouseenter: function () {
      $imageLarge.hide().prependTo($container).fadeIn(300);
    },
    mousemove: function (e) {
      var mouseX = e.pageX - $(this).offset().left;
      var mouseY = e.pageY - $(this).offset().top;
      var amountMovedX = Math.round(mouseX / $imageW * 100) / 100 * (imageLargeW - $imageW);
      var amountMovedY = Math.round(mouseY / $imageH * 100) / 100 * (imageLargeH - $imageH);
      $imageLarge.css({
        'top': amountMovedY + 'px',
        'left': -amountMovedX + 'px',
        'position': 'relative'
      });
    },
    mouseleave: function () {
      $imageLarge.remove();
    }
});
});

Simple Image Inner Zoom On Hover Plugin/Github