Minimal jQuery Image Magnifier Plugin - Mk Magnifier

File Size: 193 KB
Views Total: 7473
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal jQuery Image Magnifier Plugin - Mk Magnifier

Mk Magnifier is a super tiny jQuery plugin that allows you to magnify and show details of a product image when you roll over it.

How to use it:

1. Insert a product image in the html document.

<a class="demo" href="img/1.png">
<img src="img/1.png" style="width:300px;" />

2. Load the jQuery javascript library and jQuery Mk Magnifier plugin in the document.

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

3. The CSS to style the magnifier.

.demo {
width: 300px;
position: absolute;
.magnifier {
border: 2px solid white;
position: absolute;
height: 180px;
width: 180px;
display: none;
background-repeat: no-repeat;
background-color: #fff;
cursor: url('img/invisible.cur'), default;
-moz-box-shadow: 0 0 5px #777, 0 0 10px #aaa inset;
-webkit-box-shadow: 0 0 5px #777;
box-shadow: 0 0 5px #777, 0 0 10px #aaa inset;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
border-radius: 90px;
} {
/* A special chrome version of the cursor */
cursor: url('img/invisible_chrome.cur'), default;

4. Call the plugin with options.

ratio:1.65, // ratio = larget image size/ small image size

Change log:


  • Supports touch devices.

This awesome jQuery plugin is developed by himarkli. For more Advanced Usages, please check the demo page or visit the official website.