Image viewer

This control allows you to zoom and scroll over images of any size using one of these three options -

1. If the viewer is only showing part of the image then horizontal and vertical scrollers appear near the viewer sides. Simple drag the thumbs to scroll the view.
2. If the mouse is near the center of the viewer then the scaler^A will appear. Use the scaler to to zoom in and out of the image.
3. Pressing the mouse button (when the scaler is invisible) and dragging the mouse scrolls the view.

Try these with the viewer control below.

The image to display is set with the layers(image) function. As well as a single image we can pass an array of images^B, layers([images]), and they will be overlayed in order to produce a composite picture, assuming the images have some transparant areas.

The functions showLayer(n) and hideLayer(n) can be used to decide which layers will be visible. The parameter n must be in the range ≥0 and <N where N is the number of layers.

Map of Middle Earth is a multi-layer example where the user can select which map details to show in the viewer.

^A The scaler only appears if the scaler(value, min_scale, max_scale) function has been called with the current scale value and limits.

^B All the images should be the same size. If not, all images will be resized to match the first one in the array.