Responsive Image Magnifier & Inner Zoom Plugin – magnificent.js

File Size: 1.53 MB
Views Total: 6274 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
Official Website: Go to website
License: MIT
Plugin Author: AndersDJohnson
Demo    Download

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 supported with scroll to zoom with mouse wheel in both modes.

How to use it:

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

Load with jQuery library, jQuery magnificent.js plugin and other required jQuery resources of the webpage.

<script src="js/jquery.js"></script>
<script src="js/jquery.bridget.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.event.drag.js"></script>
<script src="js/screenfull.js"></script>
<script src="js/gajs.js"></script>
<script src="js/hammer.js"></script>
<script src="js/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>

Apply an inner zoom effect to the image.

<div mag-thumb="inner">
  <img src="1.jpg" />

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


Thanks for make jQuery plugin is developed by AndersDJohnson For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :

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.