Customizable Magnifying Glass Image Zoom Plugin - blowup.js

File Size: 1.57 MB
Views Total: 12120
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Customizable Magnifying Glass Image Zoom Plugin - blowup.js

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.