Lightbox Gallery Component Written in Vanilla JS

ensemble.Lightbox.js class from loltgt and this plugin are lightbox gallery built using plain JavaScript.

responsive grid gallery with lightbox popup and tag filter, responsive lightbox image gallery jquery, lightbox image gallery with thumbnails, javascript image gallery with thumbnails

Features:

Supports any content: Image, text, iframe, video, pdf, etc.
Supports modern image formats: WebP and Avif.
Supports dynamic content creation.

How to make use of it:

1. To get started, including Ensemble Lightbox’s JavaScript and Stylesheet on the web page.

<link rel=”stylesheet” href=”dist/css/ensemble-lightbox.min.css” />
<script src=”dist/js/ensemble-lightbox.min.js”></script>

2. Create a lightbox gallery from elements within the doc.

<div class="example">
  <a href="1.jpg">
    <img src="1.jpg" alt="Image Caption" />
  </a>
  <a href="iframe.html" data-caption="iframe">
    <img src="iframe.jpg" alt="Image Caption" />
  </a>
  <a href="pdf.pdf" data-caption="pdf">
    <img src="pdf.jpg" alt="Image Caption" />
  </a>
  // ...
</div>

const lightbox_example = document.querySelectorAll('.example');
for (const lightbox_group of lightbox_example) {
  var lightbox_options = { selector: 'a' };
  if (lightbox_group === lightbox_example[1]) {
    lightbox_options.infinite = false;
  }
  const lightbox = new ensemble.Lightbox(lightbox_group, lightbox_options);
  for (const a of lightbox_group.querySelectorAll('a')) {
    a.addEventListener('click', lightbox.open, true);
  }
}

3. Create a lightbox gallery from parts defined in a JS object.

const lightbox_contents = [
  {
    type: 'element',
    node: (function() { var el = document.createElement('div'); el.innerText = 'Test for a custom element.'; return el; }())
  },
  {
    type: 'video',
    loop: true,
    poster: 'video-test-card.png',
    sources: [
      {
        type: 'video/mp4',
        src: 'video-test-card.mp4'
      },
      {
        type: 'video/webm',
        src: 'video-test-card.webm'
      }
    ]
  },
  {
    type: 'video',
    src: 'https://www.youtube.com/embed/mN0zPOpADL4',
    caption: 'Agent 327: Operation Barbershop\n\nfrom Blender Studio',
    allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
    allowfullscreen: true //TODO FIX
  },
  {
    type: 'video',
    src: 'https://player.vimeo.com/video/325910798',
    caption: 'Spring - Blender Open Movie\n\nfrom Blender Studio',
    allow: 'autoplay; fullscreen; picture-in-picture',
    allowfullscreen: true //TODO FIX
  },
  {
    type: 'audio',
    src: 'https://open.spotify.com/embed/album/54Awn36ryf55PkZyOR4iwQ',
    allowtransparency: true, //TODO FIX
    allow: 'encrypted-media'
  },
  {
    type: 'iframe',
    src: '',
    height: '100%' //TODO FIX
  },
  {
    type: 'audio',
    src: 'audio-test.wav',
    autoplay: true
  }
  // ...
];

const lightbox = new ensemble.Lightbox({ 
      contents: lightbox_contents 
});

4. All default choices.

const lightbox = new ensemble.Lightbox({ 
      className: ['modal', 'modal-lightbox'],
      selector: '',
      contents: null,
      navigation: true,
      captioned: true,
      infinite: true,
      autoDiscover: true,
      autoHide: 'navigation', // "navigation" or "captions"
      overlayed: false,
      checkOrigin: true,
      prev: {
        onclick: this.prev,
        innerText: '\u003C',
        ariaLabel: 'Previous'
      },
      next: {
        onclick: this.next,
        innerText: '\u003E',
        ariaLabel: 'Next'
      },
      onStep: function () {},
      onSlide: function () {},
      onCaption: function () {}
});

Multi-purpose Lightbox Gallery, ensemble Lightbox Plugin/Github, lightbox image gallery html css, bootstrap lightbox multiple images, responsive lightbox gallery