使用EasyFancybox Wordpress插件以及無限滾動

Question

試圖找出在使用無限滾動加載新內容時如何重新初始化Easy FancyBox。我試過$.fancybox.init()，但這似乎不夠。在頭節調用方便的fancybox的腳本是：

jQuery(document).ready(function($){ 
var fb_timeout = null; 
var fb_opts = { 'overlayShow' : true, 'centerOnScroll' : true, 'showCloseButton' : true, 'showNavArrows' : true, 'onCleanup' : function() { if(fb_timeout) { window.clearTimeout(fb_timeout); fb_timeout = null; } } }; 
/* IMG */ 
var fb_IMG_select = 'a[href$=".jpg"]:not(.nofancybox),a[href$=".JPG"]:not(.nofancybox),a[href$=".gif"]:not(.nofancybox),a[href$=".GIF"]:not(.nofancybox),a[href$=".png"]:not(.nofancybox),a[href$=".PNG"]:not(.nofancybox)'; 
$(fb_IMG_select).addClass('fancybox').attr('rel', 'gallery'); 
$('a.fancybox, area.fancybox').fancybox($.extend({}, fb_opts, { 'transitionIn' : 'elastic', 'easingIn' : 'easeOutBack', 'transitionOut' : 'elastic', 'easingOut' : 'easeInBack', 'opacity' : false, 'titleShow' : true, 'titlePosition' : 'over', 'titleFromAlt' : true })); 
/* Auto-click */ 
$('#fancybox-auto').trigger('click'); 
}); 
/* ]]> */ 

任何想法如何，我可以重新初始化這樣的事情，特別是結合新的內容加載到＃內容div.post？感謝您的任何幫助。

Answer 1

檢查this thread，它可以幫助（EasyFancybox使用的fancybox V1.3.4）

更新：我只是回顧了參考線（上圖）將單新添加的元素工作，而不是畫廊。如果你有一組圖庫（使用rel屬性），那麼你可能更喜歡升級到jQuery 1.7+（如果還沒有），並使用jQuery on()而不是delegate()，這將允許你初始化你現有的和動態添加的元素。

我做了一個例子頁面here，它展示瞭如何使用jQuery on()解決動態添加元素和fancybox（v1.3.x）的問題，如果你想看看。

根據示例頁面上，我想在您的特定情況下，您可以嘗試調整你的代碼是這樣的：

jQuery(document).ready(function($){ 
    var fb_timeout = null; 
    var fb_opts = { 'overlayShow' : true, 'centerOnScroll' : true, 'showCloseButton' : true, 'showNavArrows' : true, 'onCleanup' : function() { if(fb_timeout) { window.clearTimeout(fb_timeout); fb_timeout = null; } } }; 
    /* IMG */ 
    $("#content div.post").on("focusin", function(){ 
     var fb_IMG_select = 'a[href$=".jpg"]:not(.nofancybox),a[href$=".JPG"]:not(.nofancybox),a[href$=".gif"]:not(.nofancybox),a[href$=".GIF"]:not(.nofancybox),a[href$=".png"]:not(.nofancybox),a[href$=".PNG"]:not(.nofancybox)'; 
     $(fb_IMG_select).addClass('fancybox').attr({'rel': 'gallery', 'tabindex': '1'}); 
     $('a.fancybox, area.fancybox').fancybox($.extend({}, fb_opts, { 
      'transitionIn' : 'elastic', 
      'easingIn' : 'easeOutBack', 
      'transitionOut' : 'elastic', 
      'easingOut' : 'easeInBack', 
      'opacity' : false, 
      'titleShow' : true, 
      'titlePosition' : 'over', 
      'titleFromAlt' : true 
     })); 
     /* Auto-click */ 
     $('#fancybox-auto').trigger('click'); 
    }); // on 
}); // ready 

當然是需要的jQuery 1.7+。