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.
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";
});