结合使用EasyFancybox Wordpress插件和无限滚动

问题描述

试图弄清楚在无限滚动中加载新内容时如何重新初始化Easy FancyBox.我尝试了$.fancybox.init()，但这似乎还不够.在顶部，调用easy fancybox的脚本为:

Trying to figure out how to reinitialize Easy FancyBox when new content is loaded in with infinite scroll. I tried $.fancybox.init(), but this doesn't seem to be enough. In the head section the script that calls easy fancybox is:

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中加载的新内容吗?谢谢您的帮助.

Any Ideas how I can reinitialize something like this, bound specifically to new content loaded into #content div.post? Thank you for any help.

推荐答案

检查此线程，可能会有所帮助(EasyFancybox使用fancybox v1.3.4)

Check this thread, it may help (EasyFancybox uses fancybox v1.3.4)

更新:我刚刚回顾到，参考线程(以上)将适用于单个新增元素，但不适用于画廊.如果您有一组图库(使用rel属性)，则您可能更喜欢升级到jQuery 1.7+(如果尚未安装)，并使用jQuery on()而不是delegate()，这将允许您初始化现有的和动态添加的元素.

Update: I just recalled that the thread of reference (above) will work for single new added elements, but not for galleries. If you have a set of galleries (using the rel attribute) then you may prefer to upgrade to jQuery 1.7+ (if not yet) and use jQuery on() instead of delegate(), that will allow you to initialize your existing and dynamically added elements.

我制作了一个示例页面 此处 如果想看一下，可以使用jQuery on()解决动态添加的元素和fancybox(v1.3.x)的问题.

I made an example page here that shows how to use jQuery on() to solve the issue of dynamically added elements and fancybox (v1.3.x), if you want to have a look.

根据示例页面，我想在您的特定情况下，您可以尝试通过以下方式调整代码:

Based on the example page, I guess in your specific case, you may try tweaking your code this way:

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 +.

Of course, jQuery 1.7+ is required.

这篇关于结合使用EasyFancybox Wordpress插件和无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！