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:

panHorizontal(default:) true
panVertical(default:) true
wrapHorizontal(default:) false
wrapVertical(default:) false
visibilityRatio(default:) 0.5
minPixelRatio(default:) 0.5
minZoomImageRatio(default:) 0.8
maxZoomPixelRatio(default:) 2
defaultZoomLevel(default:) 0
minZoomLevel(default:) null
maxZoomLevel(default:) null

Constraining by viewport visibility as a ratio.

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.

A visibilityRatio of 1.

Below is the relevant configuration.

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

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'.

A visibilityRatio of 1.

Below is the relevant configuration.

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