自定义工具栏

官网示例：http://openseadragon.github.io/examples/ui-toolbar/

尽管OpenSeadragon提供了覆盖在视口上的默认按钮，但在许多情况下，演示可能需要更传统的工具栏。OpenSeadragon允许您轻松地将控件停靠在页面上的任何元素中。

此外，工具栏具有支持全屏模式和正常模式之间转换的逻辑。用户可以在全屏模式下设置工具栏样式，包括隐藏它

 

一、 toolbar设置

...
<div id="toolbarDiv" style="width:200px; height:30px;"></div>
...

<script type="text/javascript">
OpenSeadragon({
...
toolbar: "toolbarDiv", //设置toolbar的值为所对应的div的id
...
});
</script>

 

二、自定义按钮

var openSeadragon = OpenSeadragon({
    ...
    zoomInButton:   "zoom-in",         //放大
    zoomOutButton:  "zoom-out",        //缩小
    homeButton:     "home",            //恢复默认
    fullPageButton: "full-page",       //全屏
    nextButton:     "next",            //下一张图片
    previousButton: "previous",        //前一张图片
    ...
});