How do I get Photoswipe to recognize entire gallery from list of thumbnail images

Question

I've set up my Photoswipe 4 thumbnails using Zurb Foundation 5 block grid format, but when a thumb is clicked on, only that one images loads in photoswipe. Is there a way to get photoswipe to recognize that the gallery of images is all of those contained within the ul grid of thumbnails?

<ul class="my-gallery small-block-grid-1 large-block-grid-3" itemscope itemtype="http://schema.org/ImageGallery">
<li>
    <figure itemscope itemtype="http://schema.org/ImageObject">
    <a href="assets/images/image01.jpg" itemprop="contentUrl" data-size="2000x1125">
      <img src="assets/images/image01.jpg" itemprop="thumbnail" alt="Image description" /></a>
    <figcaption itemprop="caption description">Image caption 1</figcaption>
    </figure>
</li>
<li>
<figure itemscope itemtype="http://schema.org/ImageObject">
<a href="assets/images/image02.jpg" itemprop="contentUrl" data-size="2000x1125">
      <img src="assets/images/image02.jpg" itemprop="thumbnail" alt="Image description" /></a>
<figcaption itemprop="caption description">Image caption 1</figcaption>
</figure>
</li>
</ul>

Answer 1

The easiest option is to switch the figure tags for li tags.

<ul class="my-gallery small-block-grid-1 large-block-grid-3" itemscope itemtype="http://schema.org/ImageGallery">
  <li itemscope itemtype="http://schema.org/ImageObject">
    <a href="assets/images/image01.jpg" itemprop="contentUrl" data-size="2000x1125">
      <img src="assets/images/image01.jpg" itemprop="thumbnail" alt="Image description" />
    </a>
    <div class="caption" itemprop="caption description">Image caption 1</div>
  </li>

  <li itemscope itemtype="http://schema.org/ImageObject">
    <a href="assets/images/image02.jpg" itemprop="contentUrl" data-size="2000x1125">
      <img src="assets/images/image02.jpg" itemprop="thumbnail" alt="Image description" />
    </a>
    <div class="caption" itemprop="caption description">Image caption 1</div>
  </li>
</ul>

Then in your js (presuming you're using the example from the photoswipe website) change the following line:

return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');

to

return (el.tagName && el.tagName.toUpperCase() === 'LI');

Then finally update your CSS.