Question

在我的html中，有两个标签，一旦你点击一个标签，另一个标签被隐藏，而点击的标签显示，它是一个普通的javascript标签界面。我有一个图库插件，它在第一个div中显示图像的图库，但它不适用于第二个div中的图像，即使我已将图像隐藏在第一个div中并且它基于id为light gallery，请问为什么它不显示第二张图片的图库以及如何解决此问题

这是我的HTML

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
 <li id="tabs1" onclick="showStuff(this)" class="active pic-list"><a href="#all" >&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;All (35)</a></li>
              <li id="tabs2" onclick="showStuff(this)" class="pic-list"><a href="#ext" >&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Exterior (7) <i class="fa fa-hospital"  style="margin-left: 50px; font-size: 25px;"></i></a></li>

 <div id="tabs-1" class="tabContent" style="display: block;">
              <div class="row" id="lightgallery">

                          @if(isset($images))
                            @foreach ($images as $image)
                    <div class="col-md-3 col" style="margin-bottom: 15px" data-src="{{$image->filename}}">
                      <div class="img-con" id="{{$image->id}}">
                                      <a href="">
                          <img class="mb-2 uploaded-photos" src="{{$image->filename}}" alt="">
                                      </a>
                        <div class="img-select">
                          <div class="new gvs-title">
                            <span style="color: #333333;">{{$image->description}} <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i> <br/></span>
                          </div>
                        </div>
                      </div>
                    </div>
                  @endforeach
                        @endif
              </div>
                        </div>
                  <div id="tabs-2" class="tabContent">
                  <div class="row" id="lightgallery">

                      @if(isset($images))
                          @foreach ($images as $image)
                              <div class="col-md-3 col" style="margin-bottom: 15px" data-src="{{$image->filename}}">
                                  <div class="img-con" id="{{$image->id}}">
                                      <a href="">
                                          <img class="mb-2 uploaded-photos" src="{{$image->filename}}" alt="">
                                      </a>
                                      <div class="img-select">
                                          <div class="new gvs-title">
                                              <span style="color: #333333;">{{$image->description}}080808008080 <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i> <br/></span>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          @endforeach
                      @endif
                  </div>
                  </div>

这是我的jquery代码

 $(document).ready(function(){

        $('#lightgallery').lightGallery();
    });

Answer 1

我通过基本上调用两个光库函数并更改2个div的id来解决这个问题，即lightgallery和lightgallery1

 $(document).ready(function(){

        $('#lightgallery').lightGallery();
        $('#lightgallery1').lightGallery();
    });

插件不适用于第二张图片，Javascript

1 个答案: