Customizable Magnifying Glass Image Zoom Plugin - blowup.js
| File Size: | 1.57 MB |
|---|---|
| Views Total: | 12353 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Just another jQuery magnifying glass zoom plugin which allows you to zoom in on a specified image with a customizable magnifying lens. Lightweight and easy to use.
How to use it:
1. After downloading jQuery blowup.js plugin, just include the JavaScript file blowup.js right above the closing body tag:
<script src="/path/to/cdn/jquery..min.js"></script> <script src="/path/to/lib/blowup.js"></script>
2. And then initialize the function on the img tag:
$("img").blowup();
3. Customize the magnifying glass effect:
$("img").blowup({
// round magnifying glass
round : true,
// width/height of magnifying glass
width : 200,
height : 200,
// background color
background : "#FFF",
// border shadow
shadow : "0 8px 17px 0 rgba(0, 0, 0, 0.2)",
// border styles
border : "6px solid #FFF",
// displays cursor
cursor : true,
// z-index
zIndex : 999999
// scale factor
scale : 1
// custom CSS classes
customClasses : ""
});
Changelog:
v1.0.2 (2020-05-06)
- Allows you to add custom CSS classes
2017-01-17
- Added scale factor
2016-11-30
- offset top + left fix
2016-03-06
- Fixed could not work with
<!doctype html>HTML doctype declaration.
This awesome jQuery plugin is developed by paulkr. For more Advanced Usages, please check the demo page or visit the official website.
