Responsive Image Magnifier & Inner Zoom Plugin – magnificent.js

Demo    Download
File Size: 1.53 MB
Views Total: 951 views
Last Update:April 25, 2020
Publish Date: April 25, 2020
Official Website: Go to website
License: MIT

magnificent.js is a simple, smooth, responsive jQuery image zoom Inner/Outer zoom plugin that provides on mouse hover and drag with two modes to magnify or zoom in on an image. Inner Zoom to Shows your image in a larger size on hover. Outer Zoom to Shows a magnifier glass effect to display specific part of the image.
Also supports scroll to zoom with mouse wheel in both modes.

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" />

4. Apply a magnifier effect to the image.

<div class="outer-wrap">
  <div mag-thumb="outer">
    <img src="small.jpg" />
  <div mag-zoom="outer">
    <img src="large.jpg" />

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',

Kayla Matthews

Howdy! I'm a web designer and developer. I built CSS-Tricks, a website all about building websites, going strong for 5 years.