Question

我的网站上有一个问题，同时使用Infinite Scroll和Fancybox。在初始加载的图像上一切正常..然后只要通过无限滚动拉出新内容，新图像就不再用Fancybox打开了...到目前为止它是有意义的，原始的Fancybox调用永远不会“看到”新元素。

所以我需要让Fancybox通过Infinite Scroll回调。或者至少这是我在这里和谷歌阅读后提出来的。

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

似乎无法弄清问题是什么，非常感谢!!

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并且该版本不支持动态添加的元素（Infinite Scroll将这些元素动态添加到DOM）...因此请检查https://stackoverflow.com/a/9084293/1055987以获取解决方法。

Fancybox的无限滚动回调

1 个答案: