0

個人サイト用の画像ギャラリーを作成し、アルバム内の写真のサムネイルを表示するページを作成しました。マークアップの例は次のとおりです。

<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 に戻ります。

私が必要としているのは、最初に表示される最初の 20 枚だけではなく、アルバム内の 80 枚すべての写真を PhotoSwipe が完全なバッチで処理できる方法です。

したがって、次の 2 つのオプションがあると思います。

  1. 非表示または背景の写真リンクのセットで PhotoSwipe を機能させて、80 個すべてが表示されるようにします。

  2. photoSwipe が画像 20 に到達すると、手動の無限スクロールがトリガーされ、ユーザーがスクロールを続けられるように新しい写真が追加されます。

どうすればこれを実装し、明白で簡単な方法で機能させることができるか本当にわかりません。

何か案は？

4

1 に答える 1

2

少し遅れたかもしれませんが、ここであなたの質問に対する答えを見つけました: 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));
于 2012-09-28T10:26:16.837 に答える