Lightbox Gallery

Customization	Reference
Edit options in	📄 HTML/js/app.js
Options object	🔧 app.options.gallery
Component source	📄 HTML/js/components/PSWP.js
Component source (Gulp)	📄 SOURCE/components/PSWP/PSWP.js

Default Options

window.app = {
  options: {
    gallery: {
      itemsSelector: 'a[href]:not(a[href="#"]):not(a[href*="#"])',
      bgOpacity: 1.0,
      colorTheme: 'dark',
      initialZoomLevel: 'fit',
      secondaryZoomLevel: 2.5,
      maxZoomLevel: 4,
      // "X" (close) button
      close: {
        custom: true,
        label: false,
        labelHover: false,
        cursor: {
          magnetic: 0.25,
          scale: 1.3,
          hideNative: false,
          color: 'var(--color-accent-dark-theme)'
        }
      },
      // Prev & next gallery arrows
      arrows: {
        custom: true,
        cursor: {
          scale: 'current',
          magnetic: 0.25,
          color: 'var(--color-accent-dark-theme)'
        }
      },
      // Images counter in gallery (e.g., "2 / 7")
      counter: {
        custom: true
      },
      // Images captions grabbed from 'data-caption' attribute on <a> link
      // or from "alt" attribute of the currently active image
      captions: true,
      // Media loading indicator
      preloader: {
        custom: true
      },
      // "Zoom" button in top bar
      zoom: false,
    }
  }
}

HTML Markup

The options above are common for all galleries created in the template. For HTML markup and customization options, please refer to the PSWP Gallery component.