通過Ajax加載下一張圖片並添加到Fancybox

我的問題是我有一個大型圖庫，不應該在第一頁加載時完全加載。因此，我加載50個圖像中的10個，並向它們添加fancybox。當用戶點擊下一個按鈕時，第11張圖片應該通過Ajax加載並附加到圖庫容器。通過Ajax加載下一張圖片並添加到Fancybox

問題ist fancybox在第10張圖片停止，因爲它不知道動態加載的。

如何將動態加載的圖像添加到fancybox2？

目前我有這樣的：

function loadFancybox() { 
    $('a.lightbox').fancybox({ 
     helpers: { 
      overlay: { 
       css: { 
        'background': 'rgba(0,0,0,0.8)' 
       } 
      } 
     }, 

     beforeLoad: function() { 
      this.title = $(this.element).data('title'); 
      ajaxGetNextImages(); 
      loadFancybox(); 
     }, 
     loop: false 
    }); 
} 
loadFancybox();

ajaxGetNextImages()獲取下一個圖像:)

後，我稱之爲loadFancybox（），使所有新圖像屬於畫廊。但是，它們沒有包含直到我重新開始的fancybox ...

來源

2013-03-19 Chrisn

當我關閉fancybox並重新打開它時，它運行良好。然後所有動態加載的圖像出現在圖庫中... – Chrisn 2013-03-19 13:34:27

Fancybox不是用來處理圖庫項目的動態更新，一旦打開，** [檢查此]（https://github.com/fancyapps/fancyBox/issues/257）**除非你自己定製（和哈希）解決方案出來。 – JFK 2013-03-19 17:28:19

OK後，只是爲了好玩，並基於此GitHub問題imran-a的評論，這裏是你砍死溶液：

$(".fancybox").fancybox({ 
    loop: false, 
    beforeLoad: function() { 
     if ((this.index == this.group.length - 1) && !done) { 
      ajaxGetNextImages(); 
      done = true; 
      this.group.push(
       { href: "images/04.jpg", type: "image", title: "Picture 04", isDom: false }, 
       { href: "images/05.jpg", type: "image", title: "Picture 05", isDom: false }, 
       { href: "images/06.jpg", type: "image", title: "Picture 06", isDom: false } 
      ); // push 
     } // if 
    } // beforeLoad 
}); // fancybox

注意，除了調用ajaxGetNextImages()（其放置新圖像在文檔流量）我不得不推（手動地）的新圖像的FANC內部ybox的小組。

是不是一個完美的解決方案，但它的工作原理，請參閱DEMO HERE;您將在頁面加載時看到三個縮略圖。一旦你打開fancybox並導航到最後一個項目，另外三個縮略圖將被添加到文檔以及3個相應的圖像到fancybox畫廊。

另請注意，您必須在腳本開始時初始化var done = false;。

順便說一句，忘記功能loadFancybox()，沒有必要。

來源

2013-03-19 18:13:51 JFK

謝謝！但我不明白爲什麼這不是標準......是不是一個共同的要求？ – Chrisn 2013-03-22 15:39:40

@Chrisn：不是一個標準的實現，因爲fancybox作爲大多數插件，在DOM準備好之後被初始化，而那些項目還沒有出現，所以你必須「推」它們。如果你在fancybox啓動之前加載它們（通過ajax），那麼它們將被加載到fancybox中，因爲它使用'live'方法。 – JFK 2013-03-22 17:10:16

這是僅用於從ajax加載圖像嗎？我想你的代碼，但它像它得到圖像0,1,2然後0,1,2,3下一個0,1,2,3,4我的意思是在循環中它應該是0,1,2,3 ，4,5,6， – anam 2014-12-05 08:51:20

再次嘗試調用.fancybox();加載圖像動態

來源

2013-03-19 13:39:07

我添加了一些代碼到我的操作系統:)圖片被附加到圖庫容器後，我已經在所有項目上調用了.fancybox（）。但新圖像只出現在我重新打開fancybox – Chrisn 2013-03-19 13:56:01

通過Ajax加載下一張圖片並添加到Fancybox

回答

相關問題