首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >OpenSeaDragon:全屏工具栏位置

OpenSeaDragon:全屏工具栏位置
EN

Stack Overflow用户
提问于 2020-07-24 14:16:09
回答 1查看 271关注 0票数 0

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

我现在这样设置查看器:

代码语言:javascript
复制
<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>

我用下面的代码实例化查看器:

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

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-28 03:00:38

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

代码语言:javascript
复制
#vFooter.fullpage {
    position: absolute !important;
    left: 20px;
    bottom: 20px;
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63067903

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档