2

標準の 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 ドキュメントが見つからないので (おそらくまだ完全ではないのでしょうか?)、これを行う方法を知っている人がいるかどうか疑問に思っていました。

どうもありがとう。

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 に答える