Question

我正在使用此Image Gallery Plugin。我需要通过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>

Answer 1

这样的事情怎么样？ https://jsfiddle.net/weazk35f/22/

创建一个容器以将图像放置在...

array([0, 1])

然后将所有图像存储在数组中，并获得对容器的引用...

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

最后在DOM准备就绪时遍历数组中的每个图像，并初始化您的灯箱插件

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

通过Lightbox中的JS填充图片？

1 个答案: