OpenSeaDragon：全屏工具栏位置答案

【问题标题】：OpenSeaDragon: Full Screen Toolbar PositionOpenSeaDragon：全屏工具栏位置
【发布时间】：2020-07-24 06:16:08
【问题描述】：

我正在创建一个带有自定义工具栏的 OpenSeaDragon 查看器。似乎无论普通模式下工具栏的位置如何，进入全屏模式时工具栏都会放在屏幕顶部。我试过搜索 OpenSeaDragon 文档，但在自定义工具栏上什至找不到任何提及。

我目前这样设置查看器：

<div class="grid-panel">
    <div class="top">
        <div id="vPnl">

        </div>
    </div>
    <div class="footer">
        <div id="vFooter">
            <a href="#" id="vZoomIn">Zoom In</a>
            <a href="#" id="vZoomOut">Zoom Out</a>
            <a href="#" id="vHome">Home</a>
            <a href="#" id="vFullScreen">Full Screen</a>
        </div>
    </div>
</div>

我用这个实例化查看器：

bs.bkViewer = OpenSeadragon({
            id: "vPnl",
            prefixUrl: "/lib/openseadragon/images/",
            tileSources: {
                . . .
            },
            defaultZoomLevel: 0.3,
            toolbar: 'vFooter',
            zoomInButton: 'vZoomIn',
            zoomOutButton: 'vZoomOut',
            homeButton: 'vHome',
            fullPageButton: 'vFullScreen'
        });

我希望在进入全屏模式后能够控制工具栏的位置，可以吗？谢谢！

【问题讨论】：

标签： javascript openseadragon

【解决方案1】：

看起来您需要为其添加一些样式。 OpenSeadragon 添加了您可以在选择器中使用的 fullpage 类。请注意，OpenSeadragon 还添加了position: relative，您可能需要用!important 覆盖它。例如：

#vFooter.fullpage {
    position: absolute !important;
    left: 20px;
    bottom: 20px;
}

【讨论】：