自定义工具栏
官网示例: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", //前一张图片 ... });