jQuery zoomable plugin

There are many plugins for jQuery to zoom in and out of images. But I was unable to find one that also zoomed the associated image map, so I wrote this.

Download the Javascript source for version 1.2 (requires jQuery 1.7+ and jQuery UI)
Download the TypeScript source for 1.2 (requires jQuery 1.7+ and jQuery UI)

Usage is as follows
where .selector is the selector for your image. A few options are available.
You can disable zooming with the mouse wheel using
$('.selector').zoomable({mouseWheel: false});
You can set the initial zoom with the following
$('.selector').zoomable({zoom: 2});
You can set the initial location of the image in its container with the following
$('.selector').zoomable({top:0, left:100});
You can set any JQuery draggable options using
$('.selector').zoomable({draggableOptions: { ... }});
You can also call the following methods using
$('.selector').zoomable({method: 'methodName'});
Method name Description
zoomIn Zoom in to the image
zoomOut Zoom out from the image
reset Reset the image to its original size and location

Test it out with this demo. Drag the image around with the mouse and zoom with the mouse wheel (or use the buttons). A word of warning, if you specify height and width attributes for your image the image map may not get resized correctly.

Demo image for zoomable jQuery plugin Area 1 Area 2