Question

我为我的个人网站建立了一个图片库，我有一个页面显示了相册中照片的缩略图。示例标记如下：

<div class="photos">
  <a href="largephoto.jpg"><img src="smallPhoto.jpg" /></a>
  <a href="largephoto.jpg"><img src="smallPhoto.jpg" /></a>
  <a href="largephoto.jpg"><img src="smallPhoto.jpg" /></a>
  <a href="largephoto.jpg"><img src="smallPhoto.jpg" /></a>
  <a href="largephoto.jpg"><img src="smallPhoto.jpg" /></a>
</div>

我在页面底部有一个按钮，可以手动触发Paul Irish的Infinite Scroll，它会从下一页抓取下一批图像并将它们附加到.photos。

现在，当访问者点击照片并能够滚动浏览照片时，我将PhotoSwipe用作照片查看器。

我遇到的问题是你加载页面，点击第一张照片并开始滚动浏览，你到达当前页面的最后一张照片说图像20然后跳回图像1。

我需要的是PhotoSwipe可以对整批照片进行处理的方式，因此所有80张照片都在相册中，而不仅仅是最初显示的前20张照片。

所以我猜有两种选择：

让PhotoSwipe在隐藏或背景照片链接集上工作，以便显示所有80个。
当photoSwipe进入图像20时，它会触发手动无限滚动并将新照片附加到自身，以便用户继续滚动。

我真的不确定如何实现这一点，并以明显和简单的方式使其工作。

有什么想法吗？

Answer 1

或许有点迟了，但我在这里找到了你问题的答案：https://github.com/codecomputerlove/PhotoSwipe/issues/243

具体来说，这段代码：

image={url: 'images/full/014.jpg', caption: 'Image 014'}
src = photoSwipeInstance.settings.getImageSource(image);
caption = photoSwipeInstance.settings.getImageCaption(image);
metaData = photoSwipeInstance.settings.getImageMetaData(image);
photoSwipeInstance.cache.images.push(new PhotoSwipe.Image.ImageClass(image, src, caption, metaData));

PhotoSwipe与手动无限滚动混淆

1 个答案: