Responsive Image Magnifier & Inner Zoom Plugin - magnificent.js

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:

• 10 Best Image Zoom jQuery Plugins
• 10 Best Image Zoom JavaScript & CSS Libraries

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.