FF1+ IE8+ Opr9+

Simple Image Panner and Zoomer v2.0

  Author: Dynamic Drive

Nov 16th, 15': Script rewritten with various improvements: momentum based scrolling, responsive container etc.

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.  A list of what the script does:

  • Confines a large image inside a smaller container for viewing via dragging, either using the mouse or fingers on mobile devices. Momentum based scrolling eases panning around the image.

  • Image container can be made responsive, either with percentage based dimensions or CSS media queries.

  • Option to zoom in on the image if desired, using either the mouse wheel or auto generated controls. Specify the maximum zoom and incremental zoom amount.

  • Exposes public methods for zooming in/out of the image that can be called anywhere on the page.

Demos (Drag inside images to pan, use mouse wheel or controls to zoom in/out):


[Image Credit]


Directions Developer's View

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

Select All

The above code references the following external files (right click, and select "Save As"):

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

Select All

Setup Information

To make an image pannable, wrap the image inside a DIV:

<div id="pcontainer1" class="pancontainer">
<img src="mercedes.jpg" width="1280" height="782" />
</div>

You should:

  • Wrap the image inside a DIV element with an arbitrary but unique ID and CSS class of "pancontainer". Give the DIV explicit width and height that dictates the dimensions of the viewable area of the image (ie: 400px by 300px).

  • If possible give the image itself an explicit width and height that reflects the true dimensions of the image (ie: 1200px by 825px). If no dimensions are specified, the script will wait for the entire image to download before initializing (longer wait time).

With that done, simply call new imagepanner() in the HEAD section of your page to initialize the script on the given image container, for example:

var panimage1 // register arbitrary variable
jQuery(function($){ // on DOM load
	panimage1 = new imagepanner({
		wrapper: $('#pcontainer1'), // jQuery selector to image container
		imgpos: [100, 300], // initial image position- x, y
		maxlevel: 4 // maximum zoom level
	})
})

new imagepanner() supports the following settings, which should each be separated by a comma (except the last setting itself):

imagepanner() function
setting Description
wrapper: jquery_element

required

jQuery selector referencing the single DIV container of the image you wish to make pannable.
imgpos: [x,y]

defaults to [0,0]

Initial position of the pannable image inside the wrapper container in terms of its x and y pixel position.
maxlevel: int

defaults to 4

The maximum allowed zoom level of the pannable image. A value of 1 disables zooming, while a value of 2 for example allows the image to be zoomable up to double its original size.
mousezoom: int

defaults to 0.5

The relative zoom amount each time the mouse wheel is scrolled. A value of 0.5 for example increases/decreases the image size by 50% of the original size, on top of the current image dimensions.
controlzoom: int

defaults to 1

The relative zoom amount each time the auto generated controls are clicked on.
zoomcontrols: 'string' The HTML for the default generated controls, added inside the pannable interface, for zooming in/out of the image. The default markup is defined inside imagepanner.js as follows:

defaults.zoomcontrols = '<ul class="zoomcontrols">'
+ '<li title="Zoom In" class="in">+</li><li title="Zoom Out" class="out">-</li>'
+ '</ul>'

with its style defined inside  imagepanner.css. If you modify the HTML, be sure to give the "zoom in" control a CSS class of "in", and the "zoom out" control a class of "out" so the script can assign the proper behaviour to the two controls.

- Creating arbitrary controls to zoom in on a pannable image- the zoom() method

Once a pannable image has been initialized, it exposes a zoom() method for zooming in/out of a pannable image anywhere on the page. For example:

var panimage1 // register arbitrary variable
jQuery(function($){ // on DOM load
	panimage1 = new imagepanner({
		wrapper: $('#pcontainer1'), // jQuery selector to image container
		imgpos: [100, 300] // initial image position- x, y
	})
})

Using the arbitrary but unique instance variable (ie: panimage1), you can call zoom() on it and passing either an integer to specify the absolute zoom level, or a number prefixed with "+" or "-" to specify a relative amount to zoom:

panimage1.zoom(2) // zoom the image to 2x its original size
panimage1.zoom(1) // reset image to original size
panimage1.zoom('+0.5') // increase image size by 50% from original size, on top of existing zoom level
panimage1.zoom('-0.5') // decrease image size by 50% from original size, on top of existing zoom level

One common way to invoke the zoom() method is inside the onClick event handler of a button to toggle the pannable image using a custom control:

<button onClick="panimage1.zoom(1)">Reset</button> <button onClick="panimage1.zoom('+1')">Zoom In</button>