Stylish jQuery Image Zooming Plugin - Magnifying Glass

Magnifying Glass is a lightweight and easily customizable jQuery plugin for zooming images like a Magnifying Glass. Useful for showing details on a small image. It is a July 2013 freebie built by BastianHofmann. You’ll also be able to download the files if a member of CodeCanyon.

Features:

• Easily customizable
• Dead simple jQuery
• Clean style
• Multiple glasses per page
• Lightweight

Basic Usage:

1. Include necessary javascript library files on the page

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>

2. Include jQuery Magnifying Glass Plugin on the web page

<script type="text/javascript" src="magnify.js"></script>

3. Set up the HTML

<div class="magnify" id="magnify-1">
<div class="magnifying-glass">
<div class="large"> </div>
</div>
<img src="images/small.png" class="small" alt="iMac">
</div>

4. The CSS for this example

.magnify {
position: relative;
cursor: none;
}
.magnify .magnifying-glass {
display: none;
position: absolute;
overflow: hidden;/* Background Image here, or for specific id */
}
.magnify .magnifying-glass .large {
width: 100%;
height: 100%;
position: absolute;
}
.magnify .magnifying-glass .reflected {
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0.17) 41%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 45%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(41%, rgba(255,255,255,0.17)), color-stop(42%, rgba(255,255,255,0)), color-stop(45%, rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.17) 41%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 45%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,255,255,0.17) 41%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 45%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0.17) 41%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 45%); /* IE10+ */
background: linear-gradient(135deg, rgba(255,255,255,0.17) 41%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 45%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2bffffff', endColorstr='#00ffffff', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#magnify-1 .magnifying-glass {
-webkit-box-shadow: 0 0 5px rgba( 0,0,0,0.5 ), 0 3px 20px rgba( 0,0,0,0.5 );
box-shadow: 0 0 5px rgba( 0,0,0,0.5 ), 0 3px 20px rgba( 0,0,0,0.5 );
border: 3px solid rgba( 255,255,255,0.5 );
}
#magnify-1 .magnifying-glass {
background: #34383f url(images/large.png) top left no-repeat;
}

5. Call the plugin

<script type="text/javascript">
$(document).ready(function(){
$('#magnify-1').magnify();
});
</script>

More examples:

• Basic Example
• With Text Details Example
• With Camera Zoom Lens Example

---

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