通过API以全屏模式调用fotorama gallery [英] Call fotorama gallery in full screen mode via API
问题描述
我正在从标准HTML链接启动fotorama jquery gallery插件。它工作得很好，但我想立即以全屏模式启动，而不是点击fotorama中的链接，在它启动后将其更改为全屏。
I'm launching the fotorama jquery gallery plug-in from a standard HTML link. It works nicely but I'd like to launch in full-screen mode right away, rather than having to click the link within fotorama to change it to full screen after it's launched.
我的代码是：
<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文档（也许它还没有完整？）我很想知道如果有人知道怎么做？
Since I can't find the API documentation (perhaps it's not complete just yet?) I was wondering if anyone knows how to do this?
非常感谢。
推荐答案
1。 requestFullScreen（）
使用Fotorama API调用阻止自动初始化：
1. requestFullScreen()
Use Fotorama API call with prevented auto-initialization:
<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 按钮关闭全屏。所以......
But there will be a fullscreen-exit icon at the top-right, and users will be able to leave fullscreen. And even if you make the icon invisible, it will possible to close fullscreen by pressing esc button. So...
我相信它更好使用此代码段模仿全屏：
I believe that it’s better to imitate fullscreen with this snippet:
<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 。
这篇关于通过API以全屏模式调用fotorama gallery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
