Как динамически изменить URL изображения в lightGallery - PullRequest
Новая
       13

Как динамически изменить URL изображения в lightGallery

0 голосов
/ 20 декабря 2018

У меня проблема, мои изображения не меняются для каждого 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>

1 Ответ

0 голосов
/ 20 декабря 2018

В документации сказано, что вам нужно уничтожить () текущую галерею и создать ее заново, если вы хотите обновить содержимое, ссылка на предыдущие указания здесь здесь ,Даже при этом библиотека по-прежнему сталкивается с некоторыми проблемами, поэтому мне удается заставить ее работать, добавляя задержку 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>
...