Tiny jQuery Image Zoom Magnifying Glass Effect - Image Projection
File Size: | 426 KB |
---|---|
Views Total: | 7185 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.