example: binding custom buttons

You can now bind to an entirely custom user interface by just passing the id of the elements you want treated as buttons! This is especially useful when you need to fully control the look and feel of the user interface. (New since 0.9.50)

Binding custom buttons.
| Zoom In | Zoom 0ut | Home | Full Page <  |  > 1 of 3

The relevant configuration options are shown below. Note the value for the options are the id of the element on the page to bind the button's action to. 

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

Also note the interface in this example updates the current page numbers in the label "Page N of 3". This is achieved by making use of the provided callback 'onPageChange' 

OpenSeadragon({
    ...
    onPageChange:   function( data ){
        document.getElementById('currentpage').innerHTML = ( data.page + 1 ) + ' of 3';
    }
    ...
});