Question

我的投资组合网站上有三个页面，建立在Masonry插件上（http：// www。 4pixels.co.uk/）。在第一页上，fancybox可以很好地适用于一些图像。

但是当我使用infiniteScroll在第一页底部加载第2页时，精美的盒子链接停止工作，只需将厚盒图像加载到新页面中。

如果我将第2页（http://www.4pixels.co.uk/index2.html）直接加载到浏览器中，它可以正常工作（使用所有css / js）。我已经从这个页面中删除了js和css，因为它从第1页开始加载它们，但它没有任何区别，并且花哨的盒子仍然不起作用（尝试使用的图像是Winston Ellis网站的响应式屏幕）

一切顺利安迪

我试过了

    $(document).ready(function() {
    $("#tumblelog").on("focusin", function(){
    $("a.example2").fancybox({
    'overlayShow'   : true,
    'transitionIn'  : 'elastic',
    'transitionOut' : 'elastic'
     });
     });
     });

但仍无效。我看到你的例子正在工作，所以我不得不把它分开，因为我看不出我出错了..

Answer 1

Fancybox v1.3.4无法绑定到动态添加的元素（如infiniteScroll添加的元素）。

如果您想将fancybox绑定到这些新元素，您有两个选择：

1：升级到fancybox v2.x ...或

2：继续使用fancybox v1.3.4，但更改脚本并在（）上使用jQuery。 follow this link to learn how to

Fancybox在通过infiniteScroll加载的页面中不使用jQuery Masonry

1 个答案: