javascript - 灯箱脚本 (view.js) 不适用于 tumblr 无限滚动

Question

我一直在为 tumblr 组合 ( http://hirebeamish.tumblr.com/ ) 设计一个主题，其中包括使用 view.js ( http://finegoodsmarket.com/view/ ) 添加灯箱支持。

到目前为止，我设法让所有东西都正常工作，但是当我有超过 15 个项目时，无限滚动开始，整个灯箱东西就崩溃了。我猜是因为页面创建时页面上的新项目不存在，所以 lightbox 脚本没有检测到它们。

有谁知道是否有可能以某种方式让它工作？我需要另一个灯箱脚本吗？

Answer 1

好吧，基本上你的问题是 view.js 在 AJAX 调用后不会自动更新，这很糟糕。

您可以像这样强制更新 view.js:

new View( $('.view') );

您可以在一直向下滚动后将其粘贴到控制台中进行测试，现在图像可以正常工作了。

但是，您必须找到在无限滚动开始后每次 DOM 更新时运行它的方法。

所以让我们换一种方式来做这件事。在主题的某处添加这行代码:

$(document).on('click', 'a.imageView', function(e){
    e.preventDefault();
    $('.viewer').remove(); //This is to remove any previous viewers
    var s = $(this).attr('href');
    var v = new View ($('.imageView')); 
    v.open(); 
    v.show(s);
});

此代码的作用是在整个文档上创建一个监听器，如果单击的元素是带有“ View ”类的 anchor ，则每次单击时它都会运行该函数。然后它手动创建一个新 View ，其中包含所有图像的数组。这不是最佳解决方案，因为它每次都会构建数组，但应该可以解决您的问题。

希望这对您有所帮助。

更新:好的，现在我们将采用 anchor 的 href 属性，以便我们获得真实图像而不是缩略图。似乎还设置了 view.js，以便它自动获取“view”类，因此例如将 anchor 类从“view”更改为“imageView”。这样我们就不会打开两个灯箱。同样，由于每次单击图像时我们都会创建一个新对象，因此我们需要使用 remove() 删除所有先前的查看者。