Advanced Zoom On Hover Plugin - jQuery Extended Magnify
File Size: | 8.29 KB |
---|---|
Views Total: | 146 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Extended Magnify is a simple yet fully customizable jQuery image zoom plugin that provides a smooth Zoom On Hover and Inner Zoom experience on your images.
Great for e-commerce websites and online stores where customers can zoom in and inspect the details of items before making a purchase. Also helpful in design/photography portfolios to showcase high-resolution images in their full glory.
How to use it:
1. Include the minified version of the Extended Magnify jQuery plugin.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/extm.min.js"></script>
2. Call the function extm
on the target image and the plugin will do the rest.
<img class="example" src="1.jpg" />
$('.example').extm();
3. Place the magnified image into a specified container.
$('.example').extm({ zoomElement:$('.anotherEle'), });
4. Reposition the magnified image.
$('.example').extm({ position: 'right', rightPad: 20, });
5. Display a magnifying glass that can be moved with the mouse in the image.
$('.example').extm({ squareOverlay: true, });
6. Specify the path to the large version of the image.
$('.example').extm({ imageSrc: '1-full.jpg', // enable lazy load lazy: true, });
7. Customize the zoom level.
$('.example').extm({ zoomLevel: 1, });
8. Set the width of the magnified image.
$('.example').extm({ zoomSize: 1000, });
9. All default plugin options.
$('.example').extm({ zoomElement: false, imageSrc: $(this).attr('src'), squareOverlay: false, position: false, rightPad: 0, lazy: false, zoomLevel: 1, zoomSize: false, loadingText: false, loadingImage: false, });
10. Update the image URL.
$('.example').extmImageUpdate('new.jpg');
11. Destroy the plugin.
$('.example').extmDestroy();
This awesome jQuery plugin is developed by caleboleary. For more Advanced Usages, please check the demo page or visit the official website.
- Prev: Zoom In/Out The Entire Page - jQuery Page Zoom
- Next: None