Minimalist Image Pan & Zoom On Hover - jQuery NZoom
File Size: | 2.5 KB |
---|---|
Views Total: | 6257 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
An ultra-light (less than 1kb) jQuery inner zoom plugin for magnifying and panning an image within its original container.
Created using JavaScript (jQuery), CSS3 transitions/transforms, and mouse move/enter events.
How to use 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 target image and then wrap it 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 image on hover.
<div class="zoomArea"> <img id="NZoomImg" data-NZoomscale="2" src="product.jpg" alt="Product Image"> </div>
This awesome jQuery plugin is developed by Nicat13. For more Advanced Usages, please check the demo page or visit the official website.