Asli

# PSWP Gallery

Customization Reference
HTML selector 🔧 [data-arts-component-name="PSWP"]
Component source 📄 HTML/js/components/PSWP.js
Component source (gulp) 📄 SOURCE/components/PSWP/PSWP.js

# Default Options

See Lightbox Gallery options.

# HTML Markup

<div
  data-arts-component-name="PSWP"
  data-arts-component-options="{}"
>
  <!-- Item #1 -->
  <a
    class="d-block"
    data-pswp-width="1024"
    data-pswp-height="1536"
    href="img/assets/postsPortfolio/project01/01-img-1.jpg"
  >
    <img
      class="lazy of-contain"
      src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3C/svg%3E"
      decoding="async"
      data-src="img/assets/postsPortfolio/project01/01-img-1.jpg"
      width="1024"
      height="1536"
      alt=""
    />
  </a>
  <!-- Item #2 -->
  <a
    class="d-block"
    data-pswp-width="1024"
    data-pswp-height="1024"
    href="img/assets/postsPortfolio/project01/01-img-2.jpg"
  >
    <img
      class="lazy of-contain"
      src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3C/svg%3E"
      decoding="async"
      data-src="img/assets/postsPortfolio/project01/01-img-2.jpg"
      width="1024"
      height="1024"
      alt=""
    />
  </a>
  <!-- Item #3 -->
  <a
    class="d-block"
    data-pswp-width="1024"
    data-pswp-height="682"
    href="img/assets/postsPortfolio/project01/01-img-7.jpg"
  >
    <img
      class="lazy of-contain"
      src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3C/svg%3E"
      decoding="async"
      data-src="img/assets/postsPortfolio/project01/01-img-7.jpg"
      width="1024"
      height="682"
      alt=""
    />
  </a>
</div>

# Customization

# 1. Adding images to the lightbox gallery



 
 
 





 
 
 




<a
  class="d-block"
  data-pswp-width="1024"
  data-pswp-height="1536"
  href="img/assets/postsPortfolio/project01/01-img-1.jpg"
>
  <img
    class="lazy of-contain"
    src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3C/svg%3E"
    decoding="async"
    data-src="img/assets/postsPortfolio/project01/01-img-1.jpg"
    width="1024"
    height="1536"
    alt=""
  />
</a>
  • Set the full image size in [data-pswp-width] and [data-pswp-height] attributes on the inner <a> element.
  • Set the full image path in the [href] attribute on the inner <a> element.
  • Set the thumbnail image size in the [width] and [height] attributes on the inner <img> element.
  • Set the thumbnail image path in the [data-src] attribute on the inner <img> element.

# 2. Adding video to the lightbox gallery

Vimeo, YouTube, and self-hosted videos are supported.

<a href="https://vimeo.com/177110108" data-autoplay="true">Play Vimeo video</a>
<a href="https://www.youtube.com/watch?v=RK1K2bCg4J8" data-autoplay="true">Play YouTube video</a>
<a href="img/assets/postsPortfolio/project06/06-cover-1-landscape.mp4" data-autoplay="true">Play local video</a>

← Rotating Button →