如何显示画廊图像并仅显示与画廊相关的图像

Question

我有3个画廊专栏，分别为"Gallary 1", "Gallary 2", "Gallary 3"。每个画廊都有超过5张图片集。

现在，我正在做的是，当用户单击图库1时，应该仅显示一个图库；当用户单击图库2时，应该仅显示两个图库，依此类推。

>

我在Google上检查了该插件，但没有找到。

现在，我正在使用http://sachinchoolur.github.io/lightGallery/插件

$(document).ready(function() {
         $('.lightgallery').lightGallery({
            thumbnail: false
        });
    });

.lightgallery a img{width: 300px;}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/css/lightgallery.css">
<div class="lightgallery">
  <a href="http://scbb.ihbt.res.in/SCBB_dept/video_tutorial/vd/examples/images/Swan_large.jpg">
      <img src="http://scbb.ihbt.res.in/SCBB_dept/video_tutorial/vd/examples/images/Swan_large.jpg" />
  </a>

  <a href="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball_node_full_image_2.jpg">
      <img src="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball_node_full_image_2.jpg" />
  </a>
  
  <a href="https://wallpaperbrowse.com/media/images/fall-autumn-red-season_WV7Vb7u.jpg">
      <img src="https://wallpaperbrowse.com/media/images/fall-autumn-red-season_WV7Vb7u.jpg" />
  </a>


  <a href="https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png">
      <img src="https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png" />
  </a>


</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>

上面的代码段仅显示一个图库部分，因为它显示了所有图像。

还有其他插件可以解决我的问题吗？

我尝试过一些想法，我将像下面的代码一样使用css创建

.lightgallery a{position: absolute;} all the anchor tag images will display over the first image but this is not the right way. right?

<div class="lightgallery"><!--gallary one images--></div>
<div class="lightgallery"><!--gallary two images--></div>
<div class="lightgallery"><!--gallary three images--></div>

Answer 1

环绕每个lightgallery div并创建一个画廊

$(document).ready(function() {
  $('.lightgallery').each(function(i, v) {
    $(v).lightGallery({
      thumbnail: false
    });
  });
});

.lightgallery a img {
  width: 300px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/css/lightgallery.css">
<div class="lightgallery">
  <a href="http://scbb.ihbt.res.in/SCBB_dept/video_tutorial/vd/examples/images/Swan_large.jpg">
    <img src="http://scbb.ihbt.res.in/SCBB_dept/video_tutorial/vd/examples/images/Swan_large.jpg" />
  </a>
  <a style="display:none;" href="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball_node_full_image_2.jpg">
    <img src="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball_node_full_image_2.jpg" />
  </a>
  </div>
<div class="lightgallery">
  <a href="https://wallpaperbrowse.com/media/images/fall-autumn-red-season_WV7Vb7u.jpg">
    <img src="https://wallpaperbrowse.com/media/images/fall-autumn-red-season_WV7Vb7u.jpg" />
  </a>
  </div>
<div class="lightgallery">

  <a href="https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png">
    <img src="https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png" />
  </a>


</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>