Magnifying Glass Image Zoom Plugin with jQuery and CSS3 - magnify.js

Just another jQuery image zoom plugin which allows you to enlarge part of an image with a CSS3 based magnifying glass effect. Support for Multiple images and multiple requests to the same image.

How to use it:

1. Create the Html for a magnifying glass which will contain the original/large version of your image.

<div class="large" style="background: url('large.png') no-repeat;"></div>

2. Insert the small version of your image into the web page.

<img class="small" src="small.png">

3. And then wrap them into an element with class of 'magnify'.

<div class="magnify">
	
  <div class="large" style="background: url('large.png') no-repeat;"></div>
	
  <img class="small" src="small.png">
	
</div>

4. Set the CSS position: relative; property to the 'magnify' element.

.magnify {position: relative;}

5. Create the magnifying glass.

.large {
  width: 175px;
  height: 175px;
  position: absolute;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  -webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),  0 0 7px 7px rgba(0, 0, 0, 0.25),  inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),  0 0 7px 7px rgba(0, 0, 0, 0.25),  inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),  0 0 7px 7px rgba(0, 0, 0, 0.25),  inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  display: none;
}

6. To solve overlap bug at the edges during magnification.

.small {display: block;}

7. Include the jQuery javascript library and the jQuery magnify.js at the bottom of the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="js/magnify.js" type="text/javascript"></script>

---

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