How to inject captions when using LuminousGallery class

Question

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);

Answer 1

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);

    }

Answer 2

Based on the project documentation, it looks like you can pass a function to the caption.config option:

Captions can be a literal string, or a function that receives the Luminous instance's trigger element as an argument and returns a string.

So you can replace:

let options = {
  caption: true
}

With this:

let options = {
  caption: (trigger) => trigger.querySelector('img').getAttribute('data-caption');
}

This question was also answered on the GitHub issue itself.