New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE6+ Opr9+

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 Developer's View

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

Select All

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:

Select All

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

<div class="pancontainer" data-orient="center" style="width:400px; height:300px;">
<img src="myimage.jpg" style="width:700px; height:525px" />
</div>

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:

<div class="pancontainer" data-orient="center" data-canzoom="yes" style="width:700px; height:500px;">
<img src="myimage.jpg" style="width:1200px; height:900px" />
</div>

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:

<div class="pancontainer" data-orient="center" style="width:400px; height:300px; margin:auto">
<img src="myimage.jpg" style="width:700px; height:525px" />
</div>

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

<div class="pancontainer" data-orient="center" style="width:400px; height:300px; float:left">
<img src="myimage.jpg" style="width:700px; height:525px" />
</div>

<div class="pancontainer" data-orient="center" style="width:400px; height:300px; float:left">
<img src="myimage.jpg" style="width:700px; height:525px" />
</div>

<br style="clear:left" />