odyniec.net

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:

  • 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 less than 5KB

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


Download
Documentation

Live Example

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


Zoom
Zoom with fade in
Zoom with rotation

Quick Usage Instructions

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

<head> ... <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.1.1.zip – a zip archive containing the plugin source (packed version included), a minified version of jQuery, the loading icon GIF picture, and license files.

License

Dual licensed under the MIT and GPL licenses.