Image Magnifier Glass Effect In jQuery - BUP.js

File Size: 92.8 KB
Views Total: 11199
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Image Magnifier Glass Effect In jQuery - BUP.js

BUP.js is a really simple image zoom plugin that zooms in part of your image with a magnifying glass effect.

Use this plugin on your webpage to enables the user to view the details of part of the image (like product) with mouse move.

How to use it:

1. Load the main script BUP.js after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/BUP.js"></script>

2. Apply the BUP.js to an image in the document and determine the magnifying power.

<img src="1.jpg" class="example" />
// 1x
$('.example').BUP(null, 1);

// 2x
$('.example').BUP(null, 0.5);

// 3x
$('.example').BUP(null, 1.5);

3. You can also apply the Magnifier Glass effect to multiple images as follows.

<img src="1.jpg" class="example1" />
<img src="2.jpg" class="example2" />
// 2x
$('.example1').BUP('example2', 0.5);

4. Override the default styles of the Magnifier Glass effect.

var defaults = {
    round: true,
    width: 200, 
    height: 200, 
    background: '#FFF',
    shadow: '0 8px 17px 0 rgba(0, 0, 0, 1)', 
    border: '6px solid #FFF', 
    cursor: true,
    zIndex: 999999,
}

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