1

今天在我的网站上安装了 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>

具有 ID #portfolio_grid 的单个主容器有 2 个具有不同选择器的画廊 - 1 个用于横幅图像，2 个用于徽标。我想在点击时看到 2 个不同的画廊，每个画廊显示 1/1 图像而不是 1/2，所以我尝试理解 lightGallery HTML 标记说明并编写了以下代码：

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

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

这通常适用于第一个画廊，但不适用于第二个。我试图<figure>...</figure>用唯一的 id 包装 div，但在我的情况下它破坏了网站。

在此之后，我尝试了另一个与 lightGallery 自己的 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 与单个 id 和许多不同的选择器一起工作？请帮忙。

4

1 回答 1

0

试试这个：（清理两个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');
});
于 2019-06-03T15:24:46.110 回答