OpenSeadragon 4.1.1

Sequence Mode

It is not uncommon to have a sequence of images to present. Although it's easy enough to add a "previous" and "next" link on your page, it's nice to allow the user to navigate the image sequence without having to leave the page.

Basic Example with Default Settings

OpenSeadragon can display an array of tile sources, presented with a previous and next button.

Basic Example with Default Settings

The key is to provide an array for tileSources, and to set the sequenceMode flag.

OpenSeadragon({
    ...
    tileSources: [ ... ],
    sequenceMode: true,
    ...
});

Preset Zoom Level, Resetting on Page Turn

Click on the navigator and alternate pressing the w and s keys to reproduce the effect of the referenced overlay (depends on screen refresh rate; most screens will display the effect).

Preset Zoom Level

We control the zoom level for each new page with defaultZoomLevel.

OpenSeadragon({
    ...
    tileSources: [ ... ],
    sequenceMode: true,
    defaultZoomLevel: 1.05,
    ...
});

Preserving the Viewport Zoom Level and Position for Image Sequences

The preserveViewport option remembers the zoom and pan between images.

OpenSeadragon({
    ...
    tileSources: [ ... ],
    sequenceMode: true,
    preserveViewport: true,    
    ...
});

Mixed Tile Sources

The individual tile sources in the tileSources array can be of any type OpenSeadragon supports.

OpenSeadragon({
    ...
    tileSources: [ ... ],
    sequenceMode: true,
    ...
});