Заполнить изображения с помощью JS в лайтбокс?

Я использую этот плагин галереи изображений. Мне нужно заполнить изображения с помощью JavaScript. Я попробовал несколько методов. Но это не работает.

Может кто-нибудь предложить мне способ populate Images с помощью JavaScript.

var img1 = "https://picsum.photos/600.jpg?image=251";
var img2 = "https://picsum.photos/600.jpg?image=252";
var img3 = "https://picsum.photos/600.jpg?image=253";

var c1 = document.getElementById('c1');
c1.src = img1;
<div class="example" id="exampleZoomGallery" style="display: flex;">
  <a class="inline-block" href="../../global/img/heart.jpg" title="view-7" data-source="../../global/img/heart.jpg">
    <img id="c1" class="img-responsive" src="../../global/img/heart.jpg" alt="..." width="220" style="padding: 5px;" />
  </a>
  <a class="inline-block" href="../../global/img/heart.jpg" title="view-8" data-source="../../global/img/heart.jpg">
    <img id="c2" class="img-responsive" src="../../global/img/heart.jpg" alt="..." width="220" style="padding: 5px;" />
  </a>
  <a class="inline-block" href="../../global/img/heart.jpg" title="view-9" data-source="../../global/img/heart.jpg">
    <img class="img-responsive" src="../../global/img/heart.jpg" alt="..." width="220" style="padding: 5px;" />
  </a>
</div>

Источник

1 ответ

Решение

Как насчет этого? https://jsfiddle.net/weazk35f/22/

Создайте контейнер для размещения ваших изображений в...

<div class="example" id="exampleZoomGallery" style="display: flex;"></div>

затем сохраните все изображения в массиве и получите ссылку на контейнер...

var images = [
    'https://picsum.photos/600.jpg?image=251',
    'https://picsum.photos/600.jpg?image=252',
    'https://picsum.photos/600.jpg?image=253'
];

var gallery = jQuery('#exampleZoomGallery');

Затем создайте функцию для заполнения изображения...

function populateImage(src, container) {
    var a = jQuery('<a></a>');
    a.attr('href', src);
    a.attr('data-toggle', 'lightbox');

    // Optional but allows for navigation between images within lightbox
    a.attr('data-gallery', container.attr('id'));

    var img = jQuery('<img />');
    img.attr('src', src);

    a.append(img);
    container.append(a);
}

и наконец перебираем каждое из изображений в вашем массиве, когда DOM готов, и инициализируем ваш плагин лайтбокса

jQuery(document).ready(function($) {
    $(images).each(function(index, image) {
        populateImage(image, gallery);
    });

    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
        event.preventDefault();
        $(this).ekkoLightbox();
    });
});
Источник
Другие вопросы по тегам