jquery.snipe

Sniper-lens-style zoom on images


Get started

Check the Demos

View on GitHub RayFranco/jquery.snipe


Demo

Note: This is in a very early stage of development. Don’t use it in production !

Features

Sniper-lens-style zoom on images.

Basic usage

The best way to get it working fast is by wrapping the image to be zoomed in an a tag

<a href="large.jpg" class="snipe">
  <img src="normal.jpg">
</a>

Or by setting a data-zoom property

<img src="normal.jpg" class="snipe" data-zoom="large.jpg">

And this is how you call the plugin

$('.snipe img').snipe();

If your DOM don’t care about your high-definition image, just tell the plugin directly :

$('.snipe img').snipe({
  image: 'large.jpg'
});

There is more options to configure the plugin, see Configuration section.

Configuration

Option Type Default Description
class string snipe-lens CSS class that will be added to the lens object
size int 200 Size of the lens (diameter)
animation null null Unused yet
image string null Image url in it's high definition version. If `null` given, it will check for `data-zoom` property or `href` element if targeted on a `a` element
css object or false *N/A* Properties that will be passed to the lens. Set it to false to do your custom CSS from outside the plugin
zoomin function null Callback that will be called when the zoom lens is displayed
zoomout function null Callback that will be called when the zoom lens is hidden
zoommoved function null Callback that will be called when the zoom lens is moving

Advanced usage

Nothing here yet

Compatibility

Not tested yet