Performant Image Magnifying Glass Effect With jQuery - jZoom

jZoom is a simple fast jQuery plugin which provides a customizable magnifying glass effect for image zoom. You will see an enlarged image next to the original one when hovering over.

How to use it:

1. You first need to load jQuery library and the jQuery jZoom plugin in the html page like this:

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="jzoom.min.js"></script>

2. Prepare your small/large images. Assume that you have a small image named '1.jpg', the large image should be named as '1_big.jpg'.

3. Add the small image to your webpage.

<div class="jzoom">
  <img src="1.jpg">
</div>

4. Calling the function will provide a basic magnifying glass effect on the image.

$('.jzoom').jzoom();

5. Customize the plugin with the following options.

$('.jzoom').jzoom({

  // width / height of the magnifying glass
  width: 400,
  height: 400,

  // where to position the zoomed image
  position: "right",

  // x/y offset in pixels.
  offsetX: 20,
  offsetY: 0,

  // opacity level
  opacity: 0.6,

  // background color
  bgColor: "#fff",

  // loading text
  loading: "Loading..."
  
});

Changelog:

2016-05-12

• JS update

2016-03-12

• fix position bug

---

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