如何在使用 LuminousGallery 时插入字幕 class

Question

我正在使用灯箱插件 (https://github.com/imgix/luminous)

我有以下设置（见下文），可以为单张图片添加标题到灯箱，但我不知道如何让它适用于多张图片。我真的不想手动更改插件源代码，但如果这是唯一的方法，那很好。我欢迎任何建议。谢谢

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

根据项目文档，您似乎可以将函数传递给 caption.config 选项：

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

所以你可以替换：

let options = {
  caption: true
}

有了这个：

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

GitHub issue 本身也回答了这个问题。

Answer 2

除了上面的回答，我意识到构造函数“LuminousGallery”缺少一个参数。所以我修改了我的代码如下：

    if(lightboxLinks.length > 1){

       if(!config.caption){
            config.caption = (trigger) => trigger.querySelector('img').getAttribute('data-caption');
        }
       
        galleryOpts = {
            arrowNavigation: true
        }

        new LuminousGallery(lightboxLinks, galleryOpts, config);

    }

如何在使用 LuminousGallery 时插入字幕 class

How to inject captions when using LuminousGallery class

javascript

plugins

imgix