1

我有一个问题，我的图像对于每个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>

4

1 回答 1

2

在文档上，它说如果要刷新内容，您必须销毁（）当前画廊并再次创建它，参考之前的指示在这里。即使这样做，图书馆仍然存在一些问题，所以我设法让它工作，增加了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>

于 2018-12-20T19:05:00.413 回答