Dynamic Mode

LightGallery can be instantiated and launched programmatically by setting dynamic option to true and populating dynamicEl option by passing array of objects representing the gallery elements. See available dynamic options Docs.

HTML Structure
<button type="button" id="dynamic-gallery-demo">Open Gallery</button>
const $dynamicGallery = document.getElementById('dynamic-gallery-demo');
const dynamicGallery = lightGallery($dynamicGallery, {
    dynamic: true,
    dynamicEl: [
            src: 'img/1.jpg',
            thumb: 'img/thumb-1.jpg',
            subHtml: '<h4>Image 1 title</h4><p>Image 1 descriptions.</p>',
            src: 'img/2.jpg',
            thumb: 'img/thumb-2.jpg',
            subHtml: '<h4>Image 2 title</h4><p>Image 2 descriptions.</p>',
            src: 'img/3.jpg',
            thumb: 'img/thumb-3.jpg',
            subHtml: '<h4>Image 3 title</h4><p>Image 3 descriptions.</p>',
$dynamicGallery.addEventListener('click', function () {
    // Starts with third item.(Optional).
    // This is useful if you want use dynamic mode with
    // custom thumbnails (thumbnails outside gallery),

Load more slides

You can add or remove slides of a dynamic gallery by passing the updated dynamicEl list via refresh method

HTML Structure
    class="btn btn-success"
    Launch Gallery with additional images
    .addEventListener('click', () => {
        const newItems = [
                src: 'img/4.jpg',
                thumb: 'img/thumb-4.jpg',
                subHtml: '<h4>Image 4 title</h4><p>Image 4 descriptions.</p>',
                src: 'img/5.jpg',
                thumb: 'img/thumb-5.jpg',
                subHtml: '<h4>Image 5 title</h4><p>Image 5 descriptions.</p>',
        const updatedDynamicElements = [...dynamicEl, ...newItems];

        // To open gallery after updating slides,

Edit this page on GitHub

WordPress version

WordPress version of lightGallery is almost ready for release. Enter your Email to get notified when we launch!