This time I will share jQuery Plugin and tutorial about Tiny jQuery Image Zoom Magnifying Glass Effect – Image Projection, hope it will help you in programming stack.
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.
1 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> |
2 |
<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.
2 |
<div class="overlay"></div> |
3 |
<img src="images/1-small.jpg" id="demo" data-pimg="images/1.jpg" /> |
3. Initialize the plugin.
1 |
$( window ).load(function(){ |
3 |
$(".wrap .overlay").imageProjection($("#sampleimg")); |
4. Custom the styles of the magnifying lens and overlay via CSS as you want.
02 |
border: dotted #ccc 1px; |
03 |
background: rgba(255,255,255,0.5); |
31 |
background: rgba(255, 255, 255, 0.5); |
35 |
.overlay:hover:after { display: none; } |
Change log:
v0.0.2 (2015-11-02)
This awesome jQuery plugin is developed by widatama. For more Advanced Usages, please check the demo page or visit the official website.
