jQuery magnifying glass zoom plugin

Magnify JS is a simple, lightweight jQuery magnifying glass zoom plugin, works perfectly.

jQuery magnifying glass plug-ins

This jQuery plugin adds a magnifying glass style zoom functionality to images. It is a useful feature to have for product images on ecommerce websites, or if you just want people to be able to zoom into an image without spawning additional overlays or popup windows that may cover your content.

A simple, lightweight jQuery magnifying glass zoom plugin.
A simple, lightweight jQuery magnifying glass zoom plugin.

Usage

1. Add resources:

<link rel="stylesheet" href="/css/magnify.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.magnify.js"></script>

2. Specify the large image:

The URI to the large image can be placed in the data-magnify-src attribute (as shown below) or passed as the src option when calling the .magnify() function.

<img src="/product.jpg" data-magnify-src="/product-large.jpg">

If the data-magnify-src attribute or src option is not used, then Magnify JS will try to grab the large image from the parent link element, e.g.:

<a href="/images/product-large.jpg">
  <img src="/images/product.jpg">
</a>

3. Call the .magnify() function:

$(document).ready(function() {
  $('img').magnify();
});

Or call with options:

$(document).ready(function() {
  $('img').magnify({
    speed: 200,
    src: '/images/product-large.jpg'
  });
});

Demo:

http://thdoan.github.io/magnify/demo.html

See more at project website, or GitHub:

https://github.com/thdoan/magnify

See also:

Jquery Image Zoom Plugin

Enjoy!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1