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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mk.magnifier.js"></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;
}
.magnifier.chrome {
/* A special chrome version of the cursor */
cursor: url('img/invisible_chrome.cur'), default;
}

4. Call the plugin with options.

<script>
$('.demo').mkMagnifier({
width:300,
height:460,
ratio:1.65, // ratio = larget image size/ small image size
magnifier_diameter:180
});
</script>

Change log:

2014-02-18

• 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.