New Improvements

Below are links to five samples of new improvements made to the viewer. Tablet compatibility is enabled on all five samples. The curtain can be dragged by touching the curtain divison, while touching and dragging the image away from the divison allows navigation. Touching the center of the division moves both the horizontal and vertical divisions while touching only either the horizontal or vertical division enables movement for that specific division.

There are two modes for how the curtain behaves when navigating the image on touch devices. Both are demonstrated in the following samples. The "hot zone" width for moving the curtain by touch is also configurable. Touching the screen simultaneously with three fingers brings the center of the curtain division to the center of the three touch locations.

The ability to enter the configurations can also be URL-encoded. There is a built-in functionality to extract the current URL as well, both illustrated in sample 5.

Switchable views and buttons to control aspects of the view

This is an example to show the proper usage of the viewer to switch its configuration via Javascript, and how to use Javascript attached to external buttons to control the viewer. Additionally, it shows how to specify the text to display in the corners of the images via snippets of HTML. In the curtain-viewer configuration, the labels are configured to fade away after a configurable time. In the side-by-side synced view, the labels are configured never to disappear (we strongly advise against this practice since it interferes with the viewing of the images.)

Three-pane Curtain Layout

Any possible layout of the three-panes is supported. A bottom-major pane layout is shown below.

Four-Pane Curtain Layout

Note how the curtain stays in the same position relative to the screen when navigating the image on touch devices. The first sample's curtain stays in the same position relative to the image. This is configurable to the user's preference (screen-following or image-following).

Two-Pane Curtain Layout

Both horizontally divided and vertically divided two-pane layouts are supported.

Side-by-side Sync Layout (any number of panes)

Any number of images are supported for the side-by-side view. Both horizontal and vertical arrangements are configurable and the sizes of each image are automatically calculated depending on the number of images displayed.

URL-Configuration

A URL-configuration scheme is built in; all of the possible configurations can be encoded within the URL, allowing for one page to be able to conform to whatever input is provided. The following sample is a 3-pane scheme, with a built-in preset-view. The ability to extract a URL from a page is also built-in. It is temporarily set so pressing the "1" key will return the appropriate URL. Try locating a position, extracting the URL and then entering that into the search bar to automatically be brought to the same view.