javascript - 通过JS在灯箱中填充图像？

Question

我正在使用这个Image Gallery Plugin 。我需要通过 JavaScript 填充图像。我尝试了一些方法。但它不起作用。

有人可以建议我一种通过 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>

Answer 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();
    });
});