Dynamic Drive DHTML Scripts- Simple Image Panner and Zoomer

New Revised CSS Library Forums Web Tools

Simple Image Panner and Zoomer v1.1

Author: Dynamic Drive

March 25th, 10': Updated with ability to zoom in/out of image

Description: Simple Image Panner lets you partially clip and confine large images on your site to a smaller container to save space, with the hidden portion accessible by dragging -or panning- inside the image. The optional zoom feature lets the user zoom in and out of the image at the same time. This script is great for embedding large images on your page that users may also want to zoom in on to get a closer look.

Demos (Drag inside image to see more. First and 2nd image zoomable as well):

Directions

Step 1: Add the below code inside the <HEAD> section of the page:

The above code references an .js external file plus two images which you should download below (right click, and select "Save As"):

imagepanner.js
(edit inside imagepanner.js for the correct image paths to these two images)

Step 2: Insert the below sample code into the BODY section of your page, which adds 1 pannable image:

To make an image pannable, wrap the image inside a DIV with CSS class="pancontainer":

You should:

Wrap the image inside a DIV element with CSS class "pancontainer". Give this DIV an explicit CSS width and height that dictates the dimensions of the viewable area of the image (ie: 400px by 300px).
Give the image itself an explicit CSS width and height that reflects the true dimensions of the image (ie: 700px by 525px).

Inside your DIV tag, you can also insert the following two optional attributes to fine tune the behaviour of the Pannable Image in question. They are:

**Pannable Image DIV attributes**
HTML Attribute	Description
`data-orient="center"` optional	If added causes the image to be centered within the viewable area when the page loads, versus positioned to the upper left corner.
`data-canzoom="yes"` optional	If added allows the image to be zoomable. "Zoom In" and "Zoom Out" icons appear at the lower right corner of the viewable area. The image paths and maximum zoom level can be customized inside imagepanner.js.

The following code creates a pannable image that's also zoomable:

Some things to Consider

Since each pannable image is encased inside a DIV, things like centering the image or displaying two pannable images side by side for example requires a little more work. To center the image on the page, you may use the CSS technique margin:auto:

To display two pannable images side by side, floating each DIV will suffice in most cases: