Question

我遇到一个问题，我的图像没有针对每个{strong>图像

中的每个click更改

问题：

在更改不同的图像时，它没有变化
预览图片始终显示相同的图片

问题：我想更改每个图像的图像预览

此处演示： 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>

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

1 个答案: