Search code examples
javascriptpluginsimgix

How to inject captions when using LuminousGallery class


I am using a lightbox plugin (https://github.com/imgix/luminous)

I have the following set up (see below) that is able to add a caption to the lightbox for a single image, but I can't figure out how to make it work for multiple images. I don't really want to manually change the plugins source code, but if that is the only way to go this then fine. I welcome any suggestions. Thanks.

HTML

<figure class="..." ...>
    <a class="lightbox-link" href="uploads/img/small/img5449.jpg" tabindex="0">
        <img class="..." src="uploads/img/small/img5449.jpg" alt="Watch" data-caption="Nunc et dui nec ex egestas aliquet sagittis ut nisl.&nbsp;">
        <figcaption class="caption">
            <p>Sed pellentesque aliquam enim, <strong>dapibus convallis</strong> odio vestibulum eu. Nunc et dui nec ex egestas aliquet sagittis ut nisl.&nbsp;</p>
        </figcaption>
    </a>
</figure>

JAVASCRIPT

function initLuminous(options) {

    let config = options || {};
    let lightboxLinks = document.querySelectorAll(".lightbox-link");

    if(lightboxLinks.length == 1){

        if(config.caption){
            config.caption = lightboxLinks[0].dataset.caption;
        }

        new Luminous(lightboxLinks[0], config);
    }

    if(lightboxLinks.length > 1){
       // TODO: ADD CAPTIONS FOR MULIPLE IMAGES??

        new LuminousGallery(lightboxLinks, config);

    }

}

let options = {
   caption: true
}

initLuminous(options);

Solution

  • In addtion to answer above, I realise the constructor function "LuminousGallery" was missing a parameter. So I amended my code as follows:

        if(lightboxLinks.length > 1){
    
           if(!config.caption){
                config.caption = (trigger) => trigger.querySelector('img').getAttribute('data-caption');
            }
           
            galleryOpts = {
                arrowNavigation: true
            }
    
            new LuminousGallery(lightboxLinks, galleryOpts, config);
    
        }