2

我正在从标准 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 文档（也许它还不完整？）我想知道是否有人知道如何做到这一点？

非常感谢。

4

2 回答 2

3

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。

于 2013-09-28T07:20:51.217 回答
1

我浪费了很多时间试图隐藏 Fotorama 块。尝试添加类“fotorama--hidden”。

<div class="fotorama fotorama--hidden">
  <!-- images -->
</div>

这将隐藏该块，但Art 的答案 #1中的所有功能都将正常工作。当您退出全屏 Fotorama 时，它只会隐藏。

于 2014-01-11T02:35:41.230 回答