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!
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.