Fancybox 在通过InfiniteScroll 加载的页面中无法与 jQuery Masonry 配合使用

发布于 2025-01-01 09:19:52 字数 704 浏览 1 评论 0原文

我的作品集网站中有三个页面是基于 Masonry 插件构建的 (http://www.masonry.org/)。 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'
     });
     });
     });

但仍然不起作用。我看到你的例子正在工作，所以我必须把它拆开，因为我看不到我是否出错了。

原文

I have three pages in my portfolio website built on the Masonry plugin (http://www.
4pixels.co.uk/). On the first page fancybox works perfectly for a few of the images.

But when I use infiniteScroll to load page 2 at the bottom of the first page, the fancy box links stop working and just load the thick box image into a new page.

If I load page 2 (http://www.4pixels.co.uk/index2.html) directly into the browser it worked fine (with all the css/js). I've since stripped out the js and css from this page as it loads them from page 1, but it makes no difference and fancy box still doesn't work (The image to try it with is the Responsive screens for Winston Ellis website)

All the best
Andy

I have tried

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

but still not working. I see your example is working so I'll have to pull it apart as I can't see were I'm going wrong..

分享到QQ

分享到微博