将通过ajax加载的新图像添加到打开的lightbox弹出窗口中



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

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

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

请提出实现这一目标的方法。

提前谢谢。

背景

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

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

解决方案

在您的场景中,Lightbox已经打开,我假设您正在浏览一组图像。你想让用户在Lightbox打开时继续滚动,这种滚动将动态地将更多的图像加载到该集的页面上。

没有记录在案的方法来做到这一点。但是,你可以很容易地通过挖掘内部来解决你的问题。通常不建议这样做,但预计不会对Lightbox2 API进行重大更改,因此这应该是安全的(但没有保证(。

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

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

最新更新