jQuery Plugin For Sniper Lens-Style Magnifying Glass Effect - Snipe

Snipe is a tiny (~4kb) jQuery image zoom plugin that adds a sniper lens-style magnifying glass effect on an image for more details.

See also:

• Simple Image Magnification Effect - Aui-core
• Image Inner Zoom & Magnifier Plugin - JQZoom
• Photo Inner Zoom and Magnifier Plugin - Loupe
• mlens - Compact Magnifying Glass Plugin
• GS Inner Zoom - Image Inner Zoom and Magnifier Plugin
• Simple jQuery Plugin For Image Magnify Effect

Basic Usage:

1. The snipe jQuery plugin was developed based on jQuery 1.8. If you're using jQuery 1.9+, be sure to include jQuery migrate plugin for backward compatibility.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

2. Include jQuery snipe plugin after jQuery library.

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

3. Insert an image where you want to apply a magnifying glass effect on

<a href="large.jpg" id="demo"> <img src="medium.jpg" alt=""> </a>

4. Call the plugin

<script type="text/javascript">
$(function(){
$('#demo').snipe();
});
</script>

5. Default options

<script type="text/javascript">
$(function(){
$('#demo').snipe({
"class": 'snipe-lens',
size: 200,
animation: null,
image: null, //  the path to the large version of your image
cursor: 'none',
bounds: [],
css: {
  borderRadius: 200,
  width: 200,
  height: 200,
  border: '2px solid white',
  backgroundColor: 'white',
  boxShadow: '0 0 10px #777, 0 0 8px black inset, 0 0 80px white inset'
},
zoomin: function(lens) {},
zoomout: function(lens) {},
zoommoved: function(lend) {}
	});
});
</script>

---

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