Product Image Zoom On Hover - jQuery Zoom.js
File Size: | 3.21 KB |
---|---|
Views Total: | 11579 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A tiny image magnifier jQuery plugin that adds a zoom effect to any images like product images on eCommerical websites and featured images in blogs.
Features:
- Show a bigger size image on mouseover.
- Custom magnifier glass effect.
- Customizable zoom level.
See Also:
How to use it:
1. Add the large version of the image to the page as follows:
<div class="zoom"> <!-- Small Image --> <div class="original"> <img src="thumb.jpg" id="target"> </div> <!-- Large Image --> <div class="viewer"> <img src="full.jpg"> </div> <!-- Magnifier Effect --> <div class="magnifier"></div> </div>
2. The required CSS styles for the zoom effect.
.zoom, .original { position: relative; } .zoom { display: inline-block; } .original { cursor: crosshair; } #target { width: calc(var(--t) / 2); } .zoom .viewer { position: absolute; top: 0; left: 100%; width: 100%; height: 100%; overflow: hidden; } .zoom .viewer img { position: absolute; } .original:hover ~ div { display: block; } .original::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }
3. Customize the magnifier effect.
.magnifier { position: absolute; background: #000; opacity: 0.7; top: 0; left: 0; } .magnifier, .viewer { display: none; }
4. Load the zoom.js library after jQuery.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/js/zoom.js"></script>
5. Initialize the plugin and specify the zoom level (default: 2).
var myZoom = $('#target').zoom(5);
6. Set the zoom level programmatically.
myZoom.setZoom(level);
This awesome jQuery plugin is developed by jjvictor385. For more Advanced Usages, please check the demo page or visit the official website.