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. ">
<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. </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);
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);
}