LightGallery несколько галерей на одной странице - PullRequest
Новая
       13

LightGallery несколько галерей на одной странице

0 голосов
/ 01 ноября 2018

Установлена ​​lightGallery сегодня на моем сайте и вот часть кода: 

<div class="portfolio-content">      
            <ul id="portfolio_filters" class="portfolio-filters">
                    <li class="active">
                      <a class="filter btn btn-sm btn-link grph active" data-group="graphics">Banners</a>
                    </li>
                    <li>
                      <a class="filter btn btn-sm btn-link" data-group="logo">Logo</a>
                    </li>
                  </ul>

   <div id="portfolio_grid" class="portfolio-grid portfolio-masonry masonry-grid-3">

                    <figure class="gallery-graphics" data-src="images/bnrs/01-bnr.png" data-sub-html="<h4>Banner 1</h4>" data-groups='["graphics"]'>
                      <a href=""><img class="img-responsive" src="images/bnrs/01-bnr.png"></a>
                    </figure>

                    <figure class="gallery-logo" data-src="images/logo/01-logo.png" data-sub-html="<h4>Logo 1</h4>" data-groups='["logo"]'>
                      <a href=""><img class="img-responsive" src="images/logo/01-logo.png"></a>
                    </figure>

   </div>
</div>

Один главный контейнер с идентификатором #portfolio_grid имеет 2 галереи с различными селекторами - 1 для изображений баннера, 2 для логотипов. Я хочу видеть 2 разные галереи, показывающие 1/1 изображения каждое вместо 1/2, поэтому я попытался понять инструкции HTML-разметки lightGallery и написал следующий код: 

$('#portfolio_grid').lightGallery({
    hash: false,
    selector: '.gallery-graphics'
});

$('#portfolio_grid').lightGallery({
    hash: false,
    selector: '.gallery-logo'
});

, который обычно работает для первой галереи, но не работает для второй. Я пытался обернуть <figure>...</figure> в div с уникальным идентификатором, но в моем случае это сломало сайт.

После этого я попробовал другое решение, относящееся к собственной функции destroy (), и написал этот код, который частично работает только один раз - у меня 1/1 изображение в первой галерее и 1/1 изображение во второй галерее. Второй клик по картинке галереи ломает сайт. 

var $lg = $('#portfolio_grid');

$lg.lightGallery({
  hash: false,
  selector: '.gallery-graphics'
});

$lg.on('onCloseAfter.lg', function(event) {
  $lg.data('lightGallery').destroy('true');

  $lg.lightGallery({
    hash: false,
    selector: '.gallery-logo'
  });
});

Как заставить lightgallery работать с одним идентификатором и множеством различных селекторов? Пожалуйста, помогите.

1 Ответ

0 голосов
/ 03 июня 2019

Попробуйте: (очистка обоих lightGalleries) 

var $lg = $('#portfolio_grid');

$lg.lightGallery({
    hash: false,
    selector: '.gallery-graphics'
});

$lg.on('onCloseAfter.lg',function(event){
 $lg.data('lightGallery').destroy('true');
});

$lg.lightGallery({
    hash: false,
    selector: '.gallery-logo'
});

$lg.on('onCloseAfter.lg',function(event){
 $lg.data('lightGallery').destroy('true');
});
...