lightbox2 - 将通过 ajax 加载的新图像添加到打开的灯箱弹出窗口

Question

我面临一个问题。我创建了一个图片库，其中默认显示 18 张图片，如果用户向下滚动到页面末尾，则会通过 ajax 将更多图片添加到图库中。

现在假设当用户有 18 张图片并且他打开一个灯箱时，打开的灯箱有 18 张图片，他可以来回导航。

现在，如果用户滚动页面以结束新图像被添加到页面，我想将这些图像添加到打开的灯箱中。

请提出一种方法来实现这一点。

提前致谢。

标签： lightbox2

Answer 1

背景

当用户单击图像时，start()会调用 Lightbox 脚本的方法。这将通过浏览页面编译要显示的图像列表，可以是单个图像，也可以是一组（如果data-lightbox指定）。这些存储在一个名为album灯箱对象的数组中。

如果您动态加载图像，然后用户单击图像打开 Lightbox，事情应该会按预期工作，因为图像的编译发生在open上。

解决方案

在您的场景中，灯箱已经打开，我假设您正在浏览一组图像。您希望让用户在灯箱打开时继续滚动，并且此滚动将动态地将更多图像加载到属于该集合的页面上。

没有记录的方法可以做到这一点。但是，您可以通过非常轻松地挖掘内部结构来解决您的问题。通常不建议这样做，但预计不会对 Lightbox2 API 进行重大更改，因此这应该是安全的（但不能保证）。

在滚动时，一旦加载了新图像，album手动将它们添加到 Lightbox 对象的属性中。然后调用updateDetails()刷新 UI。

lightbox.album.push({
  link: 'fruit-roll-ups.jpg'
});
lightbox.updateDetails();