Question

今天在我的网站上安装了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/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'
  });

});

如何使用单个id和许多不同的选择器使lightgallery起作用？请帮忙。

Answer 1

尝试以下操作：（清理两个 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');
});

LightGallery同一页面上有多个画廊

1 个答案: