Author: | loltgt |
---|---|
Views Total: | 4 views |
Official Page: | Go to website |
Last Update: | April 13, 2025 |
License: | MIT |
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 () {} });
Changelog:
04/13/2025
- update
04/09/2025
- added swipe to slide, bugfix, refact