You can bind to an entirely custom user interface by specifying elements to be used as buttons. You can specify these elements by passing the elements or their IDs. 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",
...
});
Alternatively you can use the elements themselves as options values instead of their IDs. This is useful to prevent one set of buttons from controlling all instances when you have multiple instances of OpenSeadragon.
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";
});