I'm struggling to get PhotoSwipe to work with the markup I need. I know the fix is fairly easy, but I can't seem to get it to work properly. Here's the issue:
The Markup on the Getting Started Page is fairly simple:
<div class="my-gallery">
<figure>...</figure>
<figure>...</figure>
...
</div>
With the Vanilla JS implementation on the page, everything works fine. However, my layout asks for the following markup of my gallery:
<div class="my-gallery">
<div class="gallery-slide">
<figure>...</figure>
</div>
<div class="gallery-slide">
<figure>...</figure>
</div>
...
</div>
With this markup, the lightbox part of PhotoSwipe still works fine, however, the gallery detection (Prev & Next Arrows) and UID don't seem to work.
See the problem in this CodePen.
I know this is an issue with the element targeting in the JavaScript, I just don't seem to be able to get it right...
Hopefully you can help!