Responsive Image Magnifier & Inner Zoom Plugin – magnificent.js

Zoom
Beautiful-HTML-Presentation-Plugin-with-jQuery-reveal-js
File Size: 1.53 MB
Views Total: 6222 views
Last Update:November 13, 2023
Publish Date: July 07, 2013
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" />
</div>

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>

Done

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 :
  • v2.2.2
  • v2.2.1
  • v2.2.0
  • v2.1.5
  • v2.1.4
  • v2.1.3
  • v2.1.2
  • v2.1.1
  • v2.1.0
  • v2.0.2
  • v2.0.1
  • v2.0.0
  • v2.0.0-beta.1
  • v0.1.2
  • v0.1.1
  • v0.1.0
  • 2.2.4
  • 2.2.3

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.