1

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

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

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

4

1 回答 1

3

好的，所以基本上你的问题是 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);
});

这段代码所做的是在整个文档上创建一个侦听器，并且每次单击时，如果单击的元素是带有“视图”类的锚点，它就会运行该函数。然后它手动创建一个新视图，其中包含所有图像的数组。这不是最好的解决方案，因为它每次都构建阵列，但应该可以解决您的问题。

希望这有帮助。

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

于 2013-08-01T21:07:16.353 回答