imgZoom Home
imgZoom Documentation
Last revised: Oct 2, 2009
Introduction
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.
Basic Usage
The standard way of using the plugin is with a number of thumbnail images that link to larger pictures, e.g.:
<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> <a href="spider.jpg"><img class="thumbnail" src="spider_small.jpg" alt="Spider" /></a>
To enable the zooming functionality for these images, select them with a
jQuery selector and call the imgZoom() method:
$(document).ready(function () { $('img.thumbnail').imgZoom(); });
The plugin automatically picks up the href attribute of each
immediate parent element and uses it as the location of the full-size image.
If your HTML document is structured differently, i.e. the thumbnails are not
wrapped in links that point to the larger versions, you can use the
src option to explicitly set the
location of the full-size image.
Options
The plugin can be initialized with a number of options, passed as an object
to the imgZoom() method. The available options are:
| Option | Description |
|---|---|
duration |
The duration of the zoom in/zoom out animation (in milliseconds).
default: 500
|
hideThumbnail |
If set to true, the thumbnail image turns invisible when
animation starts.
default: false
|
instance |
If set to true, the imgZoom() call returns a
reference to an instance of imgZoom bound to the image, allowing you to use
its API methods.
|
loadingImg |
The URL of the image used as a "loading" icon, displayed on top of the
thumbnail when the full-sized image is loading.
default: "css/loading.gif"
|
opacity |
If set to a number between 0 and 1, the image's
opacity is gradually increased starting with the given value and ending
with 1, producing a fade-in effect.If set to an array of two numbers, the numbers correspond to the starting and ending opacity. default: 1
|
overlayOpacity |
The opacity of the overlay (visible when
showOverlay is true).
default: 0.75
|
rotate |
If set to true, the image does a 360° clockwise rotation
while zooming in.If set to a positive integer greater than 1, it defines the number of rotations. If set to a negative integer, the image is rotated counter-clockwise. default: false
|
showOverlay
|
If set to true, a semi-transparent black overlay is displayed
in the background of the full-size image.
default: false
|
src
|
URL of the full-size image, if it's not referenced by the parent's
href attribute.
|
You can call the plugin more than once on the same <img> element with
a new set of options, and the new options will override the old ones. For
example, if you set a new value for the duration option, the
animation speed will be changed. The src option is an exception,
as it can only be set when the plugin is initialized.
API Methods
A number of API methods are provided to make it easier to extend the plugin and to integrate it with other web application components.
In order to use these methods, you need an instance of the plugin's object.
To get one, call the imgZoom() method with the
instance option set to true:
var imgzoom = $('#thumbnail').imgZoom({ instance: true });
You can then use this object to call the public methods. For example, to
start a slow (two-second) zoom of the image, you can call the
zoomIn() method, passing 2000 as the parameter:
imgzoom.zoomIn(2000);
The following methods are available:
| Method | Description |
|---|---|
getOptions |
getOptions()
Get current options
Returns: |
setOptions |
setOptions(newOptions)
Set plugin options
Parameters: |
zoomIn |
zoomIn([duration], [callback])
Zoom in to display the full-sized image
Parameters: |
zoomOut |
zoomOut([duration], [callback])
Zoom out to hide the full-sized image
Parameters: |