/blowup.js

🔍 jQuery plugin for image magnification.

Primary LanguageJavaScriptMIT LicenseMIT

blowup.js

A jQuery plugin for customizable image magnification.

Check out a demo!

Usage

You can install blowup through npm:

$ npm install blowup

or through bower:

$ bower install blowup

Alternatively, download the package and reference the blowup.js file in your HTML file. Ensure you have included the latest stable jQuery version before including blowup.js.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="lib/blowup.js"></script>

Then, apply the blowup effect to your image.

$(document).ready(function () {
    $("img").blowup();
})

Configuration Parameters

Listed are the customization options that blowup.js allows.

Parameter Purpose Default
round If you want the magnification lens to be round.
Setting this to false will give you a square lens.		 true
width Lens Width in pixels. 200
height Lens height in pixels. 200
background Color for background (will be visible on image edges). "#FFF"
shadow CSS style for lens shadow. "0 8px 17px 0 rgba(0, 0, 0, 0.2)"
border CSS style for lens border. "6px solid #FFF"
cursor Set to false if you do not want the crosshair cursor visible. true
zIndex z-index value of the lens. 999999
scale Scale factor for zoom. 1

Example

$("img").blowup({
    "background" : "#F39C12",
    "width" : 250,
    "height" : 250
})