Fancybox 的无限滚动回调

Question

我在我的网站上同时使用 Infinite Scroll 和 Fancybox 时遇到问题。在最初加载的图像上一切正常......然后一旦通过无限滚动拉出新内容，新图像就不再用 Fancybox 打开......到目前为止，原来的 Fancybox 调用从未“看到”新元素。

所以我需要让 Fancybox 通过 Infinite Scroll 回调。或者至少这是我在阅读此处和 Google 后得出的结论。

但是，我的代码现在确实将 Fancybox 应用于新加载的图像，但 Fancybox 覆盖显示错误：无法加载请求的内容。请稍后再试。

似乎无法弄清楚问题是什么，非常感谢您的帮助！

www.deborre.net#portfolio

哦，是的，我还应该提到我也在使用同位素，一切都在 Wordpress 上运行。我还发现了这个：Using EasyFancybox Wordpress Plugin alongside Infinite-Scroll，但还没有设法让它正确地为我工作......

到目前为止我想出了什么：

        // ISOTOPE
    $(window).load(function(){
        var $container = $('#portfolio-centre-wrap')
        // initialize Isotope
        $container.isotope({
          // options...
          resizable: false, // disable normal resizing
          // set columnWidth to a percentage of container width
            itemSelector : '.portfolio-item',
          masonry: { columnWidth: $container.width() / 3 }
        });
        $container.infinitescroll({
            navSelector  : '#pagination',    // selector for the paged navigation 
            nextSelector : '#pagination .next a',  // selector for the NEXT link (to page 2)
            itemSelector : '.portfolio-item',     // selector for all items you'll retrieve
            loading: {
                finishedMsg: 'Sorry, that is it for now...',
                img: 'http://dev.deborre.net/wp-content/themes/deborre2012v2/_img/loading.gif',
                msgText: ''
              }
            },
            // call Isotope as a callback
            function(newElements) {
              var $newElems = $(newElements);
              $newElems.imagesLoaded(function(){
                $container.isotope('appended', $newElems );
                //fancybox
                var thumbnails = jQuery("a:has(img)").not(".nolightbox").filter( function() { return /\.(jpe?g|png|gif|bmp)$/i.test(jQuery(this).attr('href')) });
                thumbnails.addClass("fancybox").attr("rel","fancybox").getTitle();
                $(newElements).fancybox({
                        'cyclic': true,
                        'autoScale': true,
                        'padding': 10,
                        'opacity': true,
                        'speedIn': 500,
                        'speedOut': 500,
                        'changeSpeed': 300,
                        'overlayShow': true,
                        'overlayOpacity': "0.8",
                        'overlayColor': "#585858",
                        'titleShow': false,
                        'titlePosition': 'inside',
                        'enableEscapeButton': true,
                        'showCloseButton': true,
                        'showNavArrows': true,
                        'hideOnOverlayClick': true,
                        'hideOnContentClick': true,
                        'width': 560,
                        'height': 340,
                        'transitionIn': "fade",
                        'transitionOut': "fade",
                        'centerOnScroll': true
                 });    
              });
            }      
        );  

//答案：

好像变了：

$(newElements).fancybox({

到：

$(.fancybox).fancybox({

为我解决了这个问题。

Answer 1

您使用的是 fancybox v1.3.4 并且该版本不支持动态添加的元素（无限滚动将这些元素动态添加到 DOM）...所以请查看https://stackoverflow.com/a/9084293/1055987 以了解解决方法。