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 source Download the Javascript source (requires jQuery 1.7 and jQuery UI).
Download source Download the old version (for jQuery 1.6 and earlier).

Usage is as follows
$('.selector').zoomable();
where .selector is the selector for your image. You can also call the following methods using
$('.selector').zoomable('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


blog comments powered by Disqus