Fork me on GitHub

OpenSeadragon 2.3.1

example: binding custom buttons

You can bind to an entirely custom user interface by passing the IDs of the elements you want treated as buttons. This is useful when you need to fully control the look and feel of the user interface.

Example

Binding Custom Buttons
| Zoom In | Zoom Out | Home | Full Page |  > 1 of 3

The relevant configuration options are shown below. The option values are the IDs of the elements to bind the button actions to.

OpenSeadragon({
    ...
    zoomInButton:   "zoom-in",
    zoomOutButton:  "zoom-out",
    homeButton:     "home",
    fullPageButton: "full-page",
    nextButton:     "next",
    previousButton: "previous",
    ...
});

The interface in this example updates the current page numbers in the label "N of 3". This is achieved by adding a handler to the 'page' event using addHandler.

var viewer = OpenSeadragon({
    ...
 });

viewer.addHandler("page", function (data) {
    document.getElementById("currentpage").innerHTML = ( data.page + 1 ) + " of 3";
});