I am attempting to create a simple photo gallery using PhotoSwipe. However, I have encountered an issue where certain functions like Previous and Next buttons stop working when I add new HTML elements.
Here is the original code:
<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm3.staticflickr.com/2567/5697107145_a4c2eaa0cd_o.jpg" itemprop="contentUrl" data-size="1024x1024">
<img src="https://farm3.staticflickr.com/2567/5697107145_3c27ff3cd1_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption itemprop="caption description">Image caption 1</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg" itemprop="contentUrl" data-size="964x1024">
<img src="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption itemprop="caption description">Image caption 2</figcaption>
</figure>
This is the code from my modified photo gallery:
<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<div class="col-sm-3 col-md-2 thumb-container" data-image="o3gx9ze57" data-hotlink="9x16er3a7" data-sid="s25">
<div class="thumb">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm3.staticflickr.com/2567/5697107145_a4c2eaa0cd_o.jpg" itemprop="contentUrl" data-size="1024x1024">
<img src="https://farm3.staticflickr.com/2567/5697107145_3c27ff3cd1_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption itemprop="caption description">Image caption 1</figcaption>
</figure>
</div>
</div>
<div class="col-sm-3 col-md-2 thumb-container" data-image="o3gx9ze57" data-hotlink="9x16er3a7" data-sid="s25">
<div class="thumb">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg" itemprop="contentUrl" data-size="964x1024">
<img src="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption itemprop="caption description">Image caption 2</figcaption>
</figure>
</div>
</div>
</div>
It seems that the issue lies in my JavaScript code, but I'm unsure how to solve it.
// Code snippet for initializing PhotoSwipe from DOM
var initPhotoSwipeFromDOM = function(gallerySelector) {
// Function logic here
};
// Execute the function with selector '.my-gallery'
initPhotoSwipeFromDOM('.my-gallery');If you have any ideas on how to fix this problem, please let me know. You can view the live demo here.