0

I have built an image gallery for my personal site and I have a page showing thumbnails of photos in an album. Example markup is as follows:

<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>

I have a button at the bottom of the page which manually triggers Paul Irish's Infinite Scroll which grabs the next lot of images from the next page and appends them to .photos.

Now, I am using PhotoSwipe as a photo viewer when visitors click a photo and to be able to scroll through them.

The problem I am having is that you load the page, click the first photo and start scrolling through, You get to the last of the current pages photos say image 20 and it jumps back to image 1.

What I need is a way that PhotoSwipe can work on the full batch of photos so all 80 in an album instead of just the first 20 that are initially displayed.

So I guess there are two options:

  1. Make PhotoSwipe work on a hidden or background set of photo links so all 80 are displayed.

  2. When photoSwipe gets to image 20, it triggers the manual infinite scroll and appends the new photos to itself for the user to continue scrolling through.

I am just really unsure how I can implement this and get it to work in an obvious and easy way.

Any ideas?

rctneil
  • 7,016
  • 10
  • 40
  • 83

1 Answers1

2

A bit belated perhaps, but I found the answer to your question here: https://github.com/codecomputerlove/PhotoSwipe/issues/243

Specifically, this code:

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));
krageon
  • 21
  • 1
  • 3