PanZoom

PanZoom is a jQuery plugin that allows for the panning and zooming of a large image that has been broken up into smaller images.
Please note, this project is very young (Version 0.1 alpha) and has not been completely tested, use at your own risk!

Requirements

In order to use PanZoom, you need to have:

The base jQuery libraries
The jQuery UI core and Draggable components
Optionally, the jQuery mousewheel extension (to allow for zooming via the mouse wheel)

This is an image of the Helix Nebula taken by the Hubble telescope and ground based telescopes. The original image was 6145 x 6623 pixels.

This is an image of the Orion Nebula, from NASA/ESA. The original image was 9000 x 9000 pixels.

The following is a map of the russian empire in 1912. The original image was 8391 x 6048.

Usage

Once you have your images ready, all you need to do is set up a div to hold this content

        <div id="imageHolder" style="position:relative; width:600px; height:400px;"></div>

Then call the "panZoom" on element:

        <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $("#imageHolder").panZoom({
                zoomLevels: 5,
                imgRootPath: 'hubble1/',
                width: 6145,
                height: 6623
            });
        <script>

The options that can be passed in to the panZoom function:

Name	Description	Default
imgRootPath	The base path for the images, used in building the correct cell image links	''
zoomLevels	Number of distinct zooms that can be performed	1
width	The maximum width of the image at full zoom (level 0)	1024
height	The maximum height of the image at full zoom (level 0)	1024
cellWidth	The width of each cell (the individual images that make up the whole at that zoom level) in pixels	256
cellHeight	The height of each cell (the individual images that make up the whole at that zoom level) in pixels	256
currentZoom	The current zoom level to start at. Must be between 0 and (zoomLevels - 1) inclusive	0
zoomStep	The amount of magnification that each zoom represents. For instance, the the cells of each increasing zoom level represent twice the area of the original image as the previous zoom, then the step is 2.	2
zoomOnMouse	Whether to allow zooming of the control based on the mouse wheel. In order to enable this, you must have the jQuery mousewheel plugin installed.	false
zoomInControl	A jQuery selctor that will allow the user to zoom in to the image when clicked.	null
zoomOutControl	A jQuery selctor that will allow the user to zoom out of the image to the next zoom level.	null
status	A jQuery selector that will act as a status bar, with current zoom information.	null

Remaining Tasks

The current version, while functional, still leaves much to be desired. Below are some of the improvements and fixes we will be implementing over the new couple weeks:

Add zoom sliding bar to allow for sliding of current zoom level
Add center button support, to allow for centering of the current zoom level
Add constraints for panning, to prohibit panning out of range of the images
Improve styling
Add support for autogenerating zooming/panning buttons
Add scrollbar type support for panning
Add panning button support

If you hav e any suggestions, requests or bugs, please email panzoom at bambitinc.com

Download

You can download the latest version (or previous versions) at Google code. There you will also find a file, PanZoomMaker, that will generate individual images at different zoom levels for the specified original image.

History

Version 0.1a - 2009.08.19: Initial version release

License

This software is licensed under the MIT license, as stated below:

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.