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

$('.selector').zoomable();

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.