OpenSeadragon 4.1.1

example: viewport navigator

A viewport navigator shows the source image displayed as a reference, with a highlighted area showing which portion of the image the user is currently viewing. The navigator reuses the configured image sources so no additional image derivatives are required. Set the showNavigator to true to activate the navigator feature.

    OpenSeadragon({
        ...
        showNavigator:  true,
        ...
    });

Navigator Example

Viewport Navigator

Navigator Overlay Position

By default the navigator is positioned in the upper right corner, though it is possible to position it through configuration into any corner.

Viewport with Navigator in BOTTOM_LEFT

The relevant configuration options are shown below. The navigatorPosition attribute identifies the corner into which the navigator should be overlayed.

    OpenSeadragon({
        ...
        showNavigator:  true,
        navigatorPosition:   "BOTTOM_LEFT",
        ...
    });

Navigator Overlay Absolute Position

In addition to the corners, the navigator can be positioned at a specific size and location.

Viewport with Navigator at an Absolute Location

The relevant configuration options are shown below. The navigatorPosition attribute is set to "ABSOLUTE" and the navigatorTop, navigatorLeft, navigatorHeight, and navigatorWidth attributes define the size and location of the navigator.

    OpenSeadragon({
        ...
        showNavigator:  true,
        navigatorPosition: "ABSOLUTE",
        navigatorTop:      "40px",
        navigatorLeft:     "4px",
        navigatorHeight:   "120px",
        navigatorWidth:    "145px",
        ...
    });

Navigator Auto Fade

By default, the navigator will auto fade after some timeout when the user stops interacting with the viewport. You can disable this behavior and make it visible persistently.

Viewport with togglable Navigator

The relevant configuration options are shown below.

    var viewer = OpenSeadragon({
        ...
        showNavigator:  true,
        navigatorAutoFade:  false,
        ...
    });

    // UI code for toggling navigator
    // e.g.: button onclick handler
    var navShown = true;
    function toggleNav () {
        if (navShown)
            viewer.navigator.element.style.display = "none";
        else
            viewer.navigator.element.style.display = "inline-block";
        navShown = !navShown;
    }

Custom Navigator Location

Instead of placing the navigator overtop of the main image, the navigator may be placed elsewhere in the web page as illustrated in the example below. The navigator can be placed in a jQuery UI dialog or other widget.

Viewport With Custom Navigator Location

The relevant configuration options are shown below. The navigatorId attribute identifies the div into which the navigator is placed. When using this variation the navigator does not autofade.

    OpenSeadragon({
        ...
        showNavigator:  true,
        navigatorId:   "navigatorDiv",
        ...
    });