Introduction

Zoom and Pan (ZP) is a Dreamweaver application that allows a user to zoom on an image and pan around it, by mouse, touch, or keyboard. It achieves this by using a large-sized image that is scaled to fit on the page based on the intrinsic width/height ratio of the image so that it does not display a distorted view. The user may specify different thumbnail views. The larger sized images associated with thumbnail views after the first are downloaded when they are needed. Only the main image is downloaded when the page is loaded, along with all of the thumbnails. This application would be a good marketing tool to show off details of a product for sale.

Installation

This application is installed into Dreamweaver by downloading the RB_ZP.zxp file and installing it using the Dreamweaver CS6 Extension Manager, or a similar extension manager. (Users can get an RB_ZP.mxp file for ealier versions of Dreamweaver and use their particular version of the Extension Manager to install it.)

Using the App

Once the application has been installed into Dreamweaver, place the cursor at the spot in your document where you want the markup to appear and click on the icon, ZP Icon , in the Goodies panel, or by selecting Insert -> Goodies -> ReB Zoom and Pan and make your selections in the UI. Upon clicking the OK button, markup will be placed at the position of the cursor and links to the required support files (.css and .js) are inserted into the HEAD section of the document. If the cursor is placed in an existing instance of ZP, the UI will display a Remove button so that all markup associated with that instance can be removed from the document. As mentioned previously, the main image and all thumbnails are downloaded when the page loads. Other images associated with thumbnails after the first one get downloaded when they are needed.

User Interface (UI)

The following figure shows the UI when the cursor is within the markup of an existing instance of ZP.

Modify UI
Fig. 1 UI Modify Mode

The UI for a new instance of ZP is similar except there is no Remove button and none of the fields have been filled in.

In the upper portion of the UI, the user only need specify thumb nail images and the path to the full size images. It is suggested that meaningful values be inserted in the Alt Text field. File names for thumb nails must follow the form displayed in the figure, i.e., name_tmb_xx where name is the file name of the associated main image. Thumb nail images can be any size; their display in the markup is controlled by the Thumb Max Height value and their intrinsic aspect ratio (width-to-height).

Under Options, the Size line has a field for the maximum width of the main image. The width-to-height ratio of the main image, as determined by its intrinsic width and height values, are used in conjunction with the max-width value to configure the main window display area. This becomes a viewport, under which the main image is moved around.

The bottom portion of the UI relates to the details into how Zoom and Pan works. The default is for the image to enlarge and pan as the mouse moves over it (or by toubh on a touch-enabled machine). The cursor will change to the "zoom-in" cursor when this happens. The other option is to initiate the zoom and pan when the mouse button is held down and moved around. It will revert back to its normal displayed state when mouseup is sensed.

The next option relates to what I call a "zoom" box, which has three options:

Fig. 2Plain Zoom Box Fig. 3Magnified Zoom Box Fig. 4Zoom Box with Indicator

On a touch-based machine, like an Iphone/or Ipad, the Zoom Box feature is disabled because the user's finger more than likely will obscure the zoom box and what it displays becomes moot.

The last option relates to Advisory Notices suggesting how to proceed when the image receives focus. The default is to show them and to "fade out" when the image looses focus. The wording for these notices are user changeable by editing the ZPscript.js file. Near the top, the ZPtext object has text for mouse and keyboard navigation, which can be modified.

Miscellaneous Notes

Occassionally on page load, the main image may appear in a distorted state (tall and narrow). This is normal behavior and can be corrected by pressing the browsers ReLoad button.