Multi-purpose Lightbox Gallery With JavaScript – Ensemble Lightbox

Preview:

Description:

Ensemble Lightbox is a responsive, feature-rich lightbox gallery built using plain JavaScript, with zero dependencies.

Features:

• Supports any content types: image, text, iframe, video, pdf, etc.
• Supports modern image formats: webp and avif.
• Supports dynamic content creation.

How to use it:

1. To get started, include the Ensemble Lightbox’s JavaScript and Stylesheet on the 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 document.

<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 elements 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: 'https://docs.google.com/forms/d/e/1FAIpQLSeI8_vYyaJgM7SJM4Y9AWfLq-tglWZh6yt7bEXEOJr_L-hV1A/viewform?formkey=dGx0b1ZrTnoyZDgtYXItMWVBdVlQQWc6MQ',
    height: '100%' //TODO FIX
  },
  {
    type: 'audio',
    src: 'audio-test.wav',
    autoplay: true
  }
  // ...
];

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

4. All default options.

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 () {}
});