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/