用boxslider第二次打開fancybox不能正常工作

所以我已經設置了boxslider fancybox。在第一次關閉fancybox時，我對boxslider有些問題。用boxslider第二次打開fancybox不能正常工作

website（請注意的onclick只適用於第一個塊（頂行，最左））

的的fancybox是由下面的代碼名爲：

<div class="img-spacer" onclick="$.fancybox({href : '#portfolio-1', width: 1040, margin: 0, padding: 0, closeBtn: false}); $('.bxslider').bxSlider({auto: true,controls: false,pager: false});">

此代碼的工作只是當第一次打開fancybox時很好，但是當我關閉fancybox並再次打開它時，boxslider不再像預期的那樣工作。它會跳過一些照片，不會順利滑動。

有關如何解決此問題的任何建議？

來源

2016-01-23 Casper

每次點擊圖片時，都會創建一個fancybox的新實例。所以當你點擊2次以上時，兩個fancybox實例都會嘗試移動圖像，並且你看到的是一團糟。你需要做的是關閉窗口時停止/銷燬fancybox。 – GAntoine

我想你的意思是強迫關閉fancybox（因爲我沒有在文檔中看到停止或破壞功能）。我嘗試使用$ .fancybox.close（true）強制fancybox關閉;但這並沒有什麼區別。 – Casper

我這樣做，我會很快發佈一個答案，你需要做什麼。 – GAntoine

就像我在我的評論中提到的那樣，您需要將fancybox init移出內聯點擊處理程序，移入您的JS文件。

$(document).ready(function() { 
    // Attach fancybox to every .image-spacer div 
    $("img-spacer").fancybox({ 
     href : '#portfolio-1', 
     width: 1040, 
     margin: 0, 
     padding: 0, 
     closeBtn: false, 
     onUpdate: function() { 
      alert('update!'); 
     }, 
     onCancel: function() { 
      alert('cancel!'); 
     }, 
     onPlayStart: function() { 
      alert('play start!'); 
     }, 
     onPlayEnd: function() { 
      alert('play end!'); 
     }, 
     beforeClose: function() { 
      alert('before close!'); 
     }, 
     afterClose: function() { 
      alert('after close!'); 
     }, 
     beforeShow: function() { 
      alert('before show!'); 
     }, 
     afterShow: function() { 
      alert('after show!'); 
     }, 
     beforeLoad: function() { 
      alert('before load!'); 
     }, 
     afterLoad: function() { 
      alert('after load!'); 
     } 
    }); 

    // On clicking a .img-spacer div, attach a bxSlider 
    $(".portfolio").click(function(){ 
     $('.bxslider').bxSlider({ 
      auto: true, 
      controls: false, 
      pager: false 
     }); 
    }); 
});

以及用於在HTML

<div class="img-spacer"></div>

給這一個鏡頭，讓我知道如何去。如果你把它放在現場，我可以在那裏看看它。

來源

2016-01-24 15:00:48 GAntoine

我試過這個，但是當我第二次打開fancybox時，它不再顯示圖片。它只是顯示一個空白區域。我已經上傳了，所以你可以自己看。 – Casper

我知道了，你能否用我的更新代碼更新網站代碼，以便我能看到什麼被調用，什麼時候？ – GAntoine

完成。邊注;你錯過了一個。在第一個$（「img-spacer」） – Casper

用boxslider第二次打開fancybox不能正常工作

回答

相關問題