如何在 lightGallery 中动态更改图像 url

Question

我有一个问题，我的图像对于不同图像的每个click 都没有改变

问题：

1. 更改不同的图像并没有改变

2. 预览图像总是显示相同的图像

问题：我想更改每张图片的图片预览

在这里演示： 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>

Answer 1

在文档上，它说您必须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>