通过API在全屏模式下调用fotorama图库
通过API在全屏模式下调用fotorama图库
提问于 2013-09-25 20:47:25
我将从标准的HTML链接启动fotorama jquery图片库插件。它工作得很好，但我想在全屏模式下立即启动，而不是在fotorama中单击链接，在启动后将其更改为全屏。
我的代码是：
<div id="fotorama" class="fotorama"
data-width="100%"
data-height="100%"
data-nav="thumbs"
data-allowfullscreen="true"
data-transition="crossfade"
data-auto="false">
</div>
<p class="something">Something</p>
<script>
$(function(){
$('.something').click(function(){
var $gallery = $('#fotorama').fotorama();
var fotorama = $gallery.data('fotorama');
// Overwirte all the photos
fotorama.load([
{img: '0027.jpg'},
{img: '1759.jpg'}
]);
});
});
</script>因为我找不到API文档(也许它还没有完成呢？)我想知道有没有人知道怎么做？
非常感谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-09-28 07:20:51
1. requestFullScreen()
使用Fotorama API调用阻止自动初始化：
<script>
$(function () {
var fotorama = $('.fotorama')
.fotorama({allowfullscreen: true})
.data('fotorama');
fotorama.requestFullScreen();
});
</script>
<div class="fotorama"
data-auto="false"
data-height="100%">
<img src="1.jpg">
<img src="2.jpg">
</div>但是在右上角会有一个全屏退出图标，用户可以离开全屏。即使您使图标不可见，也可以通过按esc按钮关闭全屏。所以..。
2. data-width="100%" data-height="100%"
我认为最好用这个片段来模拟全屏：
<body style="margin: 0;">
<div class="fotorama"
data-width="100%"
data-height="100%">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
</body>例子：http://fotorama.io/examples/full-window.html.
Stack Overflow用户
发布于 2014-01-11 02:35:41
我浪费了很多时间试图隐藏福托拉马街区。试着增加“fotorama--隐藏”类。
<div class="fotorama fotorama--hidden">
<!-- images -->
</div>这将隐藏块，但Art's answer #1中的所有函数都将正常工作。当你退出时，全屏的福托拉马就会躲起来。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19014907
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号