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

$('.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.