Jquery Image Zoom Plugin

Next two, good and useful solutions for web developers and designers – zoom effects.

Such solutions are useful in many kinds of projects, like e-commerce.

Jquery Image Zoom Plugin – elevateZoom

A jQuery image zoom plugin. It’s dual licensed under the GPL and MIT license.

jQuery zoom plugin
jQuery zoom plugin

Usage

Include jQuery and the plugin on a page, and then:

<img id="z_01" src='img1_sml.png' data-zoom-image="img1_large.jpg"/>
$('#zoom_01').elevateZoom();

Demo

Find out more in this impressive set of samples:

http://www.elevateweb.co.uk/image-zoom/examples

Really rich possibilities available.

Another interesting image zoom plugin is…

jQuery-Zoom

A plugin to enlarge images on touch, click, or mouseover. Released under the MIT License, source on Github (changelog)

Setup

via npm:

npm install jquery-zoom

via Bower:

bower install jquery-zoom

How to use?

$(document).ready(function(){
  $('a.photo').zoom({url: 'photo-big.jpg'});
});

To remove Zoom, simply write:

$('#example').zoom(); // add zoom
$('#example').trigger('zoom.destroy'); // remove zoom

Full docs and download available here:

http://www.jacklmoore.com/zoom/

Keep your eyes open! Next cool stuff is coming.

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