Question

我一直在为一个tumblr投资组合（http://hirebeamish.tumblr.com/）破解一个主题，其中包括使用view.js（http://finegoodsmarket.com/view/）添加灯箱支持。

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

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

Answer 1

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

您可以强制更新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'类的锚。然后手动创建一个新视图，其中数组中包含所有图像。这不是最好的解决方案，因为它每次都会构建数组，但应该解决您的问题。

希望这会有所帮助。

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

Lightbox脚本（view.js）不适用于tumblr无限滚动

1 个答案: