Simple Jquery Photo Zoom Plugin | NZoom

photo-zoom-plugin

NZoom IS is an ultra-lightweight jQuery internal zoom plug-in for zooming and panning an image within its parent container. Created with JavaScript (jQuery), CSS3 transitions/transforms, and mouse move/input in events.

jquery image zoom plugin examples, jquery image pan zoom, jquery image zoom on mouseover example, jquery zoom image on hover, image zoom jquery, jquery zoom

How to make use of it:

1. Load the JavaScript file Nzoom.min.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/Nzoom.min.js"></script>

2. Assign the ID ‘NZoomImg’ to the goal picture after which wrap it right into a container as follows:

<div class="zoomArea">
  <img id="NZoomImg" src="product.jpg" alt="Product Image">
</div>
.zoomArea {
  width: 600px;
  height: 450px;
  overflow: hidden;
  border:1px solid
}

.zoomArea > image {
  width: 100%;
  height: 100%;
}

3. Determine the zoom factor by which to scale the picture on hover.

<div class="zoomArea">
  <img id="NZoomImg" data-NZoomscale="2" src="product.jpg" alt="Product Image">
</div>

Minimalist Image Pan & Zoom On Hover, NZoom Plugin/Github, product image zoom on hover jquery


See Demo And Download

Official Website(Nicat13): Click Here

This superior jQuery/javascript plugin is developed by Nicat13. For extra Advanced Usages, please go to the official website.