将 EasyFancybox Wordpress 插件与无限滚动一起使用

Question

试图弄清楚当新内容以无限滚动加载时如何重新初始化 Easy FancyBox。我尝试了 $.fancybox.init()，但这似乎还不够。在头部部分，调用 easy 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');
});
/* ]]> */

有什么想法可以重新初始化这样的东西，专门绑定到加载到 #content div.post 的新内容吗？感谢您的帮助。

Answer 1

检查此帖子，它可能会有所帮助（EasyFancybox 使用 fancybox v1.3.4 ）

更新：我刚刚记得参考线索（上面）适用于单个新添加的元素，但不适用于画廊。如果您有一组画廊（使用 rel 属性），那么您可能更愿意升级到 jQuery 1.7+（如果还没有）并使用 jQuery on() 而不是delegate()，这将允许您初始化现有的和动态添加的元素。

我在此处制作了一个示例页面，展示了如何使用 < code>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+。