PhotoSwipe Gallery

You can move the images anywhere you like as long as they maintain "figure" tag correctly and are in the same container.

Step 1

Include Photoswipe Library and main.js (after PhotoSwipe) file located in js folder.

Step 2

Add a HTML tag that acts as a container for all your gallery images. We'll use a div with class images-container in this case.

Step 3

Add gallery images inside your container. Make sure you preserve a similar figure tag as below. Add as many figure images as you want.

  <figure itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"
    <a href="https://placehold.it/1400x1403" class="thumbnail" itemprop="contentUrl" data-size="1400x1403">
      <img src="https://placehold.it/50x50" itemprop="thumbnail" alt="">
    </a>
  </figure>
        

Step 4

Use initPhotoSwipeFromDOM('.images-container figure'); to launch your image gallery.