jquery 使用glightbox隐藏图库图像

我期待创建一个简单的灯箱画廊4缩略图使用Glightbox（https://github.com/biati-digital/glightbox）。然而，我希望每个缩略图的房子3图像画廊。
我试过用隐藏的CSS属性来做这件事，但不能让它工作。这是我目前正在使用的代码。
有人能帮上忙吗？

<section class="wrapper bg-light" id="projects">
  <div class="container py-14 py-md-10">
<div class="swiper-container grid-view mb-6" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
  <div class="swiper">
    <div class="swiper-wrapper">
    
    <div class="swiper-slide">
        <a class="item-link" data-glightbox data-gallery="project-1"><figure class="rounded mb-6"><img src="./assets/img/projects/project-1-1.jpg" srcset="./assets/img/projects/project-1-1@2x.jpg 2x" alt="" /></figure></a>
        <div class="project-details d-flex justify-content-center flex-column">
          <div class="post-header">
            <h2 class="post-title h3"><a class="link-dark" data-glightbox data-gallery="project-4">Complete exterior renovation</a></h2>
            <div class="post-category text-ash">Location</div>
          </div>
          <!-- /.post-header -->
        </div>
        <!-- /.project-details -->
      </div>
      
      <div data-glightbox data-gallery="project-1" data-src="https://durninbuilding.ie/assets/img/projects/project-4-2@2x.jpg"  data-title="Hidden item 1"></div>
      <div data-glightbox data-gallery="project-1" data-src="https://durninbuilding.ie/assets/img/projects/project-4-3@2x.jpg"  data-title="Hidden item 2"></div>
      <div data-glightbox data-gallery="project-1" data-src="https://durninbuilding.ie/assets/img/projects/project-4-4@2x.jpg"  data-title="Hidden item 3"></div>
      
      <!--/.swiper-slide -->
      
    </div>
    <!--/.swiper-wrapper -->
  </div>
  <!-- /.swiper -->
</div>
<!-- /.swiper-container -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

字符串
JS在这里添加：https://codepen.io/kelvinwins/pen/gOQBbBg的

<div class="content-wrapper">
    <section class="wrapper bg-light" id="projects">
        <div class="container py-14 py-md-10">
            <div class="row">
                <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto text-center">
                    <h2 class="display-4 mb-3 text-center">Projects</h2>
                    <p class="lead text-center mb-6 px-md-16 px-lg-0">Take a look at some of our recent work</p>
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
            <div class="swiper-container grid-view mb-6" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a class="item-link " ><img src="https://picsum.photos/200/300" srcset="https://picsum.photos/200/300" alt="" /></a>
                            <div class="project-details d-flex justify-content-center flex-column">
                                <div class="post-header">
                                    <h2 class="post-title h3"><a class="link-dark" data-glightbox data-gallery="project-4">Complete exterior renovation</a></h2>
                                    <div class="post-category text-ash">Drogheda, Co. Louth</div>
                                </div>
                                <!-- /.post-header -->
                            </div>
                            <!-- /.project-details -->
                            <ul class="box-container d-none">
                                <li class="box">
                                    <div class="inner">
                                        <a href="https://picsum.photos/200/300" class="glightbox">
                                        <img src="https://picsum.photos/200/300" alt="image" />
                                        </a>
                                    </div>
                                </li>
                                <li class="box">
                                    <div class="inner">
                                        <a href="https://picsum.photos/200/300" class="glightbox">
                                        <img src="https://picsum.photos/200/300" alt="image" />
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!--/.swiper-slide -->
                        <div class="swiper-slide">
                            <a class="item-link" data-glightbox data-gallery="project-1">
                                <figure class="rounded mb-6"><img src="https://picsum.photos/200/300" srcset="https://picsum.photos/200/300" alt="" /></figure>
                            </a>
                            <div class="project-details d-flex justify-content-center flex-column">
                                <div class="post-header">
                                    <h2 class="post-title h3"><a class="link-dark" data-glightbox data-gallery="project-1">Bathroom renovation</a></h2>
                                    <div class="post-category text-ash">Tullyallen, Co. Louth</div>
                                </div>
                                <!-- /.post-header -->
                            </div>
                            <!-- /.project-details -->
                        </div>
                        <div data-glightbox data-gallery="project-1" data-src="https://picsum.photos/200/300"></div>
                        <div data-glightbox data-gallery="project-1" data-src="https://picsum.photos/200/300"></div>
                        <!--/.swiper-slide -->
                        <div class="swiper-slide">
                            <a class="item-link" data-glightbox data-gallery="project-2">
                                <figure class="rounded mb-6"><img src="https://picsum.photos/seed/picsum/200/300" srcset="https://picsum.photos/seed/picsum/200/300" alt="" /></figure>
                            </a>
                            <div class="project-details d-flex justify-content-center flex-column">
                                <div class="post-header">
                                    <h2 class="post-title h3"><a class="link-dark" data-glightbox data-gallery="project-2">Apex roof kitchen extension</a></h2>
                                    <div class="post-category text-ash">Ardee, Co. Louth</div>
                                </div>
                                <!-- /.post-header -->
                            </div>
                            <!-- /.project-details -->
                        </div>
                        <div data-glightbox data-gallery="project-2" data-src="https://picsum.photos/200/300?grayscale"></div>
                        <div data-glightbox data-gallery="project-2" data-src="https://picsum.photos/200/300?grayscale"></div>
                        <!--/.swiper-slide -->
                        <div class="swiper-slide">
                            <a class="item-link" data-glightbox data-gallery="project-3">
                                <figure class="rounded mb-6"><img src="https://picsum.photos/200/300/?blur" srcset="https://picsum.photos/200/300/?blur" alt="" /></figure>
                            </a>
                            <div class="project-details d-flex justify-content-center flex-column">
                                <div class="post-header">
                                    <h2 class="post-title h3"><a class="link-dark" data-glightbox data-gallery="project-3">Raised sandstone patio</a></h2>
                                    <div class="post-category text-ash">Drogheda, Co. Louth</div>
                                </div>
                                <!-- /.post-header -->
                            </div>
                            <!-- /.project-details -->
                        </div>
                        <div data-glightbox data-gallery="project-3" data-src="https://picsum.photos/200/300?grayscale"></div>
                        <div data-glightbox data-gallery="project-3" data-src="https://picsum.photos/200/300?grayscale"></div>
                        <!--/.swiper-slide -->
                        <div class="swiper-slide">
                            <a class="item-link" data-glightbox data-gallery="project-5">
                                <figure class="rounded mb-6"><img src="https://picsum.photos/200/300" srcset="https://picsum.photos/200/300" alt="" /></figure>
                            </a>
                            <div class="project-details d-flex justify-content-center flex-column">
                                <div class="post-header">
                                    <h2 class="post-title h3"><a class="link-dark" data-glightbox data-gallery="project-5">Utility renovation</a></h2>
                                    <div class="post-category text-ash">Drogheda, Co. Louth</div>
                                </div>
                                <!-- /.post-header -->
                            </div>
                            <!-- /.project-details -->
                        </div>
                        <div data-glightbox data-gallery="project-5" data-src="https://picsum.photos/seed/picsum/200/300"></div>
                        <div data-glightbox data-gallery="project-5" data-src="https://picsum.photos/seed/picsum/200/300"></div>
                        <!--/.swiper-slide -->
                        <div class="swiper-slide">
                            <a class="item-link" data-glightbox data-gallery="project-6">
                                <figure class="rounded mb-6"><img src="https://picsum.photos/200/300?grayscale" srcset="https://picsum.photos/200/300?grayscale" alt="" /></figure>
                            </a>
                            <div class="project-details d-flex justify-content-center flex-column">
                                <div class="post-header">
                                    <h2 class="post-title h3"><a class="link-dark" data-glightbox data-gallery="project-6">Wetroom with centre drain</a></h2>
                                    <div class="post-category text-ash">Drogheda, Co. Louth</div>
                                </div>
                                <!-- /.post-header -->
                            </div>
                            <!-- /.project-details -->
                        </div>
                        <div data-glightbox data-gallery="project-6" data-src="https://picsum.photos/200/300?grayscale"></div>
                        <div data-glightbox data-gallery="project-6" data-src="https://picsum.photos/200/300?grayscale"></div>
                        <!--/.swiper-slide -->
                    </div>
                    <!--/.swiper-wrapper -->
                </div>
                <!-- /.swiper -->
            </div>
            <!-- /.swiper-container -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /section -->
</div>

<script>
 var lightbox = GLightbox({
                selector: '.glightbox'
            });
 
$(document).on("click",".swiper-slide", function(e){
  lightbox.open();
});
</script>

字符串
工作codepen链接https://codepen.io/Gnanavel-the-styleful/pen/MWzPwdw?editors=1111

jquery 使用glightbox隐藏图库图像

1条答案

相关问题

热门标签

最新问答