Tiny jQuery Image Zoom Magnifying Glass Effect - Image Projection

A simple, lightweight, unobtrusive jQuery image zoom plugin for creating a magnifying glass effect to enlarge part of an image.

How to use it:

1. Include the jQuery javascript library and the jQuery Image Projection plugin at the end of the Html page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="javascripts/image.projection.js"></script> 

2. Insert an image into the Html and use data-pimg attribute to specify the larger version of the image.

<div class="wrap">
  <div class="overlay"></div>
  <img src="images/1-small.jpg" id="demo" data-pimg="images/1.jpg" /> 
</div>

3. Initialize the plugin.

$( window ).load(function(){

$(".wrap .overlay").imageProjection($("#sampleimg"));

});

4. Custom the styles of the magnifying lens and overlay via CSS as you want.

#ip-viewfinder{
  border: dotted #ccc 1px;
  background: rgba(255,255,255,0.5);
}

.wrap {
  float: left;
  display: block;
  position: relative;
}

.overlay {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: 2;
}

.overlay:after {
  content: "Hover me!";
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -80px;
  margin-top: -1.5em;
  width: 160px;
  height: 3em;
  line-height: 3em;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  font-weight: bold;
}

.overlay:hover:after { display: none; }

Change log:

v0.0.2 (2015-11-02)

• update.

---

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