在光照盒中通过JS填充图像？
在光照盒中通过JS填充图像？
提问于 2018-09-23 08:34:44
我正在使用这个图片库插件。我需要通过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
Stack Overflow用户
回答已采纳
发布于 2018-09-23 08:53:52
像这样的怎么样？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准备好时，遍历数组中的每个图像，并初始化lightbox插件。
jQuery(document).ready(function($) {
$(images).each(function(index, image) {
populateImage(image, gallery);
});
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52464414
复制相关文章
相似问题
腾讯云开发者
