How to change image url dynamically in lightGallery

i have a problem my images are not changing for each click of different images

Problem:

on changing different images it is not changing
preview image is always is showing the same image

Question: i want to change image preview for each image

Demo here: 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>

Solution

On the documentation, it says that you have to destroy() the current gallery and create it again if you want to refresh the content, reference to the previous indications is here. Even doing this, the library still presents some issues, so I manage to get it work adding a delay of 250ms between the destroy of the previous gallery and the creation of the new one.

Example:

$(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>