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而无效）

Fotorama - 深层链接和浏览器历史记录

1 个答案: