我从标准 HTML 链接启动 fotorama jquery gallery 插件。它工作得很好,但我想立即以全屏模式启动,而不是在启动后单击 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 文档(也许它还不完整?)我想知道是否有人知道如何做到这一点?
非常感谢。
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.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)