我在我的网站上同时使用 Infinite Scroll 和 Fancybox 时遇到问题。在最初加载的图像上一切正常......然后一旦通过无限滚动拉出新内容，新图像就不再用 Fancybox 打开......到目前为止，原来的 Fancybox 调用从未“看到”新元素。
所以我需要把 Fancybox 通过 Infinite Scroll 回调。或者至少这是我在这里和谷歌上阅读后提出的。
但是，我的代码现在确实将 Fancybox 应用于新加载的图像，但 Fancybox 覆盖显示错误：无法加载请求的内容。请稍后再试。
似乎无法弄清楚问题是什么，非常感谢您的帮助！
哦，是的，我还应该提到我也在使用同位素，一切都在 Wordpress 上运行。我还发现了这个：在 Infinite-Scroll 旁边使用 EasyFancybox Wordpress 插件，但还没有设法让它正确地为我工作......
到目前为止我想出了什么：
// 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({
为我解决了这个问题。