Javascript 通过lightbox中的JS填充图像？

我在用这个。我需要通过JavaScript填充图像。我试过一些方法。但它不起作用

有人能给我推荐一种通过

JavaScript
填充图像的方法吗。


var img1=”https://picsum.photos/600.jpg?image=251";
变量img2=”https://picsum.photos/600.jpg?image=252";
变量img3=”https://picsum.photos/600.jpg?image=253";
var c1=document.getElementById（'c1'）；
c1.src=img1
像这样的东西怎么样

创建一个容器来放置您的图像

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

接下来创建一个函数来填充图像

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

当你这样做的时候会发生什么<代码>src=img1？另外，为什么在html文件中已经设置了src属性？图像正在填充。但在Onclick中，它并没有显示在lightbox中？您是指代码中不起作用的Onclick事件还是JSFIDLE示例？如果是你的代码，你能在哪里发布你实现了“click”处理程序吗？我指的是jsFiddle示例？我的错-我已经用一个更新的示例更新了jsFiddle链接。你能再试一次吗？谢谢！但我没能把画廊里的箭头插进去？
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);
}

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

    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
        event.preventDefault();
        $(this).ekkoLightbox();
    });
});