fotorama - Fotorama - ディープリンクとブラウザ履歴

Question

Fotorama が各スライドに固有のハッシュで URL を更新するという事実が気に入っていますが、ブラウザーの [戻る] ボタンを使用すると、スライドショーが以前に表示したスライドに更新されません。Fotorama でブラウザの履歴にディープ リンクを記録し、ブラウザの戻る/進むボタンを使用してスライド ショーを適宜更新する方法はありますか? ありがとう

Answer 1

それを行う組み込みの方法はありません。'fotorama:show'イベントとfotorama.show()メソッドを使用して、独自のソリューションを作成します。

<script>
  $(function () {
    window.onpopstate = function (e) {
      var hash = location.hash.replace(/^#/, '');
      if (fotorama && hash) {
        fotorama.show(hash);
      }
    };

    var fotorama = $('.fotorama')
        .on('fotorama:show', function (e, fotorama) {
          var hash = fotorama.activeFrame.id || fotorama.activeIndex;
          console.log('fotorama:show', hash);
          if (window.history && location.hash.replace(/^#/, '') != hash) {
            history.pushState(null, null, '#' + hash);
          }
        })
        .fotorama({
          startindex: location.hash.replace(/^#/, '')
        })
        .data('fotorama');
  });
</script>

<!-- Fotorama -->
<div class="fotorama"
     data-auto="false">
  <a href="1.jpg"></a>
  <a href="2.jpg"></a>
  <a href="3.jpg" id="three"></a>
</div>

属性data-auto="false"大事！

デモ: http://jsfiddle.net/artpolikarpov/2Enwa/show/

元のフィドル: http://jsfiddle.net/artpolikarpov/2Enwa/ (iframe のため動作しません)