OpenSeadragon 4.1.1

example: rotation

The viewer can be rotated either programmatically or by activating the corresponding controls in the user interface.

Enabling rotation buttons

If you just want to let the user rotate the viewer, you can simply add the rotation controls and enable the pinch rotate on tactile devices. You can also specify an initial rotation.

Viewer with rotation buttons

OpenSeadragon({
    ...
    // Initial rotation angle
    degrees: 90,
    // Show rotation buttons
    showRotationControl: true,
    // Enable touch rotation on tactile devices
    gestureSettingsTouch: {
        pinchRotate: true
    }
});

Programmatically set the rotation angle

To have more control over the rotation, you can set it via the Viewport.setRotation method.

Use the slider bar to set the rotation angle

var viewer = OpenSeadragon({
    id:            "example-programmatically",
    prefixUrl:     "/openseadragon/images/",
    tileSources:   "/example-images/highsmith/highsmith.dzi"
});

// Using jQuery UI slider
$("#slider").slider({
    min: -180,
    max: 180,
    slide: function(event, ui) {
        viewer.viewport.setRotation(ui.value);
    }
});