imgZoom

imgZoom is a jQuery plugin that implements a smooth zoom effect on images. It uses vector graphics (SVG or VML) to create a graceful transition between the thumbnail and the full-sized image.

Plugin features:

  • Lightbox-like interface (dark overlay, previous/next image switching)
  • Highly customizable (CSS styling, custom HTML wrapper block)
  • Images can be zoomed in with a fade-in effect or with rotation
  • Provides API functions to zoom in and zoom out
  • Lightweight — the packed version is just 7KB

The plugin works in all major browsers, including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.

Live Example

Click any thumbnail to zoom in the full-size image.


Zoom

Zoom with fade in

Zoom with rotation

Quick Usage Instructions

Download the plugin, unzip it, and copy the JavaScript and CSS files to your website/application directory. Load the files in the <head> section of your HTML document. Make sure you also load the jQuery library (included with the plugin).

<head>
 ...
 <link rel="stylesheet" type="text/css" href="css/imgzoom.css" />
 <script type="text/javascript" src="scripts/jquery.min.js"></script>
 <script type="text/javascript" src="scripts/jquery.imgzoom.pack.js"></script>
 ...
</head>

Let's say you have a page with a number of thumbnail images, each being a link to a larger version of the picture, and each having a "thumbnail" class:

...
<a href="puppy.jpg"><img class="thumbnail" src="puppy_small.jpg" alt="Puppy" /></a>
<a href="kitten.jpg"><img class="thumbnail" src="kitten_small.jpg" alt="Kitten" /></a>
...

To make these images zoomable, select them with a jQuery selector and call the imgZoom() method:

<script type="text/javascript">
  $(document).ready(function () {
    $('img.thumbnail').imgZoom();
  });
</script>

That's it — enjoy!

» Read documentation

Download

jquery.imgzoom-0.2.2.zip – a zip archive containing the plugin source (packed version included), a minified version of jQuery, CSS and GIF files, and license text files.

License

Dual licensed under the MIT and GPL licenses.

Links

imgZoom on jQuery Plugins