Submit your widget
HomeLightbox & Dialog & Overlaysmooth images zoom effect with jQuery

smooth images zoom effect with jQuery

Created 13 years ago   Views 26536   downloads 6020    Author odyniec
smooth images zoom effect with jQuery
View DemoDownload
96
Share |

imgZoom is a jQuery plugin that implements a smooth zoom effect on images. It uses vector graphics  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 less than 7KB

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

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!

The article source:http://odyniec.net/projects/imgzoom/

You might also like