我面临一个问题。我创建了一个图像库,默认情况下,其中显示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();