Customizable Magnifying Glass Image Zoom Plugin - blowup.js

Customizable Magnifying Glass Image Zoom Plugin - blowup.js
File Size: 7.3 KB
Views Total:
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="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="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
  
});

Change log:

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.