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.
Table of Contents
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.
