Responsive Image Magnifier & Inner Zoom Plugin – magnificent.js

Zoom
Demo    Download
Beautiful-HTML-Presentation-Plugin-with-jQuery-reveal-js
File Size: 1.53 MB
Views Total: 1204 views
Last Update:November 24, 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 supported with 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 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>

3. Apply an inner zoom effect to the image.

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

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>
Done


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.