Advanced Zoom On Hover Plugin - jQuery Extended Magnify

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

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

3. Place the magnified image into a specified container.


4. Reposition the magnified image.

  position: 'right',
  rightPad: 20,

5. Display a magnifying glass that can be moved with the mouse in the image.

  squareOverlay: true,

6. Specify the path to the large version of the image.

  imageSrc: '1-full.jpg',
  // enable lazy load
  lazy: true,

7. Customize the zoom level.

  zoomLevel: 1,

8. Set the width of the magnified image.

  zoomSize: 1000,

9. All default plugin options.

  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.


11. Destroy the plugin.


This awesome jQuery plugin is developed by caleboleary. For more Advanced Usages, please check the demo page or visit the official website.