我有一个问题,每次点击
不同的图片
问题:
改变不同的图片它没有改变
预览图像总是显示相同的图像
问题:我想为每张图片更改图片预览
此处演示: https://codepen.io/eabangalore/pen/OrWaRz
$(document).ready(function() {
$('#dynamic li').on('click', function(e) {
var imgUrl = $(this).find('img').attr('data-src');
$('.image-wrapper img').attr('src',imgUrl);
});
$('.image-wrapper').on('click',function(){
var imgUrl = $(this).find('img').attr('src');
$(this).lightGallery({
dynamic: true,
dynamicEl: [{
src: imgUrl,
thumb: imgUrl
}]
});
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/css/lightgallery.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
<span>Change images:</span>
<ul id="dynamic">
<li>images 1<img src="" data-src="https://via.placeholder.com/150/0000FF/808080%20?Text=Digital.com%20C/O%20https://placeholder.com/" alt=""></li>
<li>images 2<img src="" data-src="https://via.placeholder.com/150/FF0000/FFFFFF?Text=Down.com%20C/O%20https://placeholder.com/" alt=""></li>
<li>images 3<img src="" data-src="https://via.placeholder.com/150/000000/FFFFFF/?text=IPaddress.net" alt=""></li>
</ul>
<div class="image-wrapper">
<span style="color:#fff;">click to preview image</span>
<img src="https://via.placeholder.com/150/0000FF/808080%20?Text=Digital.com%20C/O%20https://placeholder.com/">
</div>
最佳答案
在文档中,它说您必须 destroy()如果要刷新内容,请重新创建当前图库,引用前面的说明是here .即使这样做,库仍然存在一些问题,所以我设法让它工作,在销毁前一个库和创建新库之间添加 250ms
的延迟。
示例:
$(document).ready(function()
{
$('#dynamic li').on('click', function(e)
{
var imgUrl = $(this).find('img').attr('data-src');
$('.image-wrapper img').attr('src', imgUrl);
});
$('.image-wrapper').on('click', function()
{
var imgUrl = $(this).find('img').attr('src');
// Destroy previous gallery.
if ($(this).data('lightGallery'))
$(this).data('lightGallery').destroy(true);
// Wait some time before create the new gallery.
var target = $(this);
setTimeout(function()
{
target.lightGallery({
dynamic: true,
dynamicEl: [{src: imgUrl, thumb: imgUrl}]
});
}, 250);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/css/lightgallery.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
<span>Change images:</span>
<ul id="dynamic">
<li>images 1<img src="" data-src="https://via.placeholder.com/150/0000FF/808080%20?Text=Digital.com%20C/O%20https://placeholder.com/" alt=""></li>
<li>images 2<img src="" data-src="https://via.placeholder.com/150/FF0000/FFFFFF?Text=Down.com%20C/O%20https://placeholder.com/" alt=""></li>
<li>images 3<img src="" data-src="https://via.placeholder.com/150/000000/FFFFFF/?text=IPaddress.net" alt=""></li>
</ul>
<div class="image-wrapper">
<span style="color:#fff;">click to preview image</span>
<img src="https://via.placeholder.com/150/0000FF/808080%20?Text=Digital.com%20C/O%20https://placeholder.com/">
</div>
关于javascript - 如何在 lightGallery 中动态更改图像 url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53873752/