Как вставлять подписи при использовании класса LuminousGallery

Я использую плагин для лайтбокса (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);
Источник

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

    }
Источник

Судя по документации проекта, похоже, что вы можете передать функцию в caption.config вариант:

Заголовки могут быть буквальной строкой или функцией, которая получает элемент триггера экземпляра Luminous в качестве аргумента и возвращает строку.

Итак, вы можете заменить:

         let options = {
  caption: true
}

С этим:

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

На этот вопрос также был дан ответ по самой проблеме GitHub.

Источник
Другие вопросы по тегам