Performant Image Magnifying Glass Effect With jQuery jZoom - Download Performant Image Magnifying Glass Effect With jQuery - jZoom

Download Performant Image Magnifying Glass Effect With jQuery – jZoom

Posted on

This time I will share jQuery Plugin and tutorial about Performant Image Magnifying Glass Effect With jQuery – jZoom, hope it will help you in programming stack.

Performant Image Magnifying Glass Effect With jQuery jZoom - Download Performant Image Magnifying Glass Effect With jQuery - jZoom
File Size: 70.7 KB
Views Total: 21078
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

1 <script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
2 <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.

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

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

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

5. Customize the plugin with the following options.

01 $('.jzoom').jzoom({
02  
03   // width / height of the magnifying glass
04   width: 400,
05   height: 400,
06  
07   // where to position the zoomed image
08   position: "right",
09  
10   // x/y offset in pixels.
11   offsetX: 20,
12   offsetY: 0,
13  
14   // opacity level
15   opacity: 0.6,
16  
17   // background color
18   bgColor: "#fff",
19  
20   // loading text
21   loading: "Loading..."
22    
23 });

Changelog:

2016-05-12

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.

source : jqueryscript.net