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

Read More – jQuery Image Inner Zoom & Magnifier Plugin | okzoom

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.

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

Read More – 

Magnifying Picture Glass Effect In Vue | Photo Zoom Pro
Responsive Image With Zoomed Image On Hover For Vue.js


See Demo And Download

Official Website(ritaD86): Click Here

This superior jQuery/javascript plugin is developed by ritaD86. For extra advanced usage, please go to the official website.

Share