Responsive Image Magnifier & Inner Zoom Plugin - magnificent.js
File Size: | 2.21 MB |
---|---|
Views Total: | 54154 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

magnificent.js is a simple, smooth, responsive jQuery image zoom plugin that provides two modes to magnify or zoom in on an image:
- Mode 1: Inner Zoom. Shows your image in a larger size on hover.
- Mode 2: Outer Zoom. Shows a magnifier glass effect to display specific part of the image.
- Also supports scroll to zoom with mouse wheel in both modes.
See also:
How to use it:
1. Load the core stylesheet and default theme in the head section of your webpage.
<link href="src/css/mag.css" rel="stylesheet" /> <link href="src/theme/default.css" rel="stylesheet" />
2. Load the jQuery library, jQuery magnificent.js plugin and other required resources at the bottom of the webpage.
<script src="/path/to/jquery.js"></script> <script src="/path/to/jquery.bridget.js"></script> <script src="/path/to/jquery.mousewheel.js"></script> <script src="/path/to/jquery.event.drag.js"></script> <script src="/path/to/screenfull.js"></script> <script src="/path/to/gajs.js"></script> <script src="/path/to/hammer.js"></script> <script src="/path/to/PreventGhostClick.js"></script> <script src="src/js/mag-analytics.js"></script> <script src="src/js/mag.js"></script> <script src="src/js/mag-jquery.js"></script> <script src="src/js/mag-control.js"></script>
3. Apply an inner zoom effect to the image.
<div mag-thumb="inner"> <img src="1.jpg" /> </div>
$host = $('[mag-thumb="inner"]'); $host.mag();
4. Apply a magnifier effect to the image.
<div class="outer-wrap"> <div mag-thumb="outer"> <img src="small.jpg" /> </div> <div mag-zoom="outer"> <img src="large.jpg" /> </div> </div>
$host = $('[mag-thumb="outer"]'); $host.mag({ mode: 'outer' });
5. Full plugin options.
// Inner: Zoom region embedded in thumbnail // Outer: Zoom region independent of thumbnail mode: 'inner', // mirror: Zoomed region follows mouse/pointer // drag: Drag to move // joystick: Weird joystick interaction to move // fales: No mouse/touch position: 'mirror', // move: On move (e.g. mouseover) // hold: On hold (e.g. while mousedown) positionEvent: 'move', // Themes apply a style to the widgets theme: 'default', // Whether to show thumbnail or zoomed first, e.g. in "inner" mode. initialShow: 'thumb', // Whether lens position is constrained constrainLens: true, // Whether zoomed position is constrained constrainZoomed: false, // Minimum zoom level allowed, from (0,∞) zoomMin: 1, // Maximum zoom level allowed, from (0,∞) zoomMax: 10, // Rate at which to adjust zoom, from (0,∞). zoomRate: 0.2, // Rate at which to drag, from (0,∞) dragRate: 0.2, // Ratio of outer (w/h) to inner (w/h) container ratios ratio: 1, // Whether toggle display of zoomed vs. thumbnail upon interaction toggle: true, // Whether the zoomed region should gradually approach target, rather than immediately smooth: true, // Milliseconds for render loop interval. // Adjust for performance vs. frame rate. renderIntervalTime: 20, // CSS mode to use for scaling and translating. Either '3d', '2d', or 'position'. cssMode: '3d',
Changelog:
v2.2.4 (2019-12-06)
- update
v2.2.3 (2016-08-15)
- update
v2.2.2 (2016-07-10)
- initial support for data-* attributes
v2.1.5 (2016-05-31)
- Use jQuery instead of $ shortcut for improved compatibility
v2.1.4 (2015-11-02)
- Add renderIntervalTime option.
2015-09-14
- Improve proxy events, adding touch and click. Also namespace drag events.
2015-08-28
- added destroy method.
v2.1.2 (2015-08-26)
- version update and bugfix.
This awesome jQuery plugin is developed by AndersDJohnson. For more Advanced Usages, please check the demo page or visit the official website.