blowup.js
A jQuery plugin for customizable image magnification.
Usage
You can install blowup through npm:
$ npm install blowupor through bower:
$ bower install blowupAlternatively, 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 })
