0

我正在使用灯箱插件（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);
4

2 回答 2

2

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

标题可以是文字字符串，也可以是接收 Luminous 实例的触发元素作为参数并返回字符串的函数。

所以你可以替换：

let options = {
  caption: true
}

有了这个：

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

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

于 2020-11-09T20:33:51.917 回答
0

除了上面的回答，我意识到构造函数“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);

    }
于 2020-11-18T20:56:22.793 回答