example: zoom and pan options

A deep zoom viewport allows several options to be set in order to constrain the minimum and maximum zoom range as well as the range of panning.

These features are generally controlled through various combinations of the options:

Constraining by viewport visibility as a ratio, and constraining during panning

The option visibilityRatio, which is by default 0.5, ensure that you cannot pan the image far enough to fill the viewport with more than 50% background. Setting it to 1, as in this example, ensure the image cannot be panned so as to show any background. Normally OpenSeadragon will enforce this by 'bouncing' back when the pan dragging is released. In this example we also add constrainDuringPan: true which stop the drag immediately when it hits the bounding area.

A visibilityRatio of 1.

Below is the relevant configuration. 

OpenSeadragon({
		...
        visibilityRatio: 1.0,
        constrainDuringPan: true
        ...
    });

Constraining pan direction and using a default zoom level.

In this example we combine a number of options to produce an effect similar to a pdf view 'fit-width'.

Vertical scroll and zoom.

Below is the relevant configuration. 

OpenSeadragon({
		...
        panHorizontal: 		false,
        defaultZoomLevel: 	1,
        minZoomLevel: 		1,
        maxZoomLevel: 		1,
        visibilityRatio: 	1
        ...
    });