Lightbox起動時に各画像を複製するブートストラップギャラリー

Question

こんにちはLightboxに問題があり、ギャラリーから画像が複製されてしまいます。たとえば、3つの画像を並べると、3つの画像が画面に表示されますが、クリックすると6つの画像が表示されます。

ここでは、私がやっていることと私の問題が何であるかをよりよく理解できるように、いくつかのコードを示します。あなたはすべての6枚の画像のdata-lightbox = "person1"を使用しているため

<div class = "gallery"> <!------- Image Gallery --------> 
    <h2> Gallery </h2> 
     <div class="row"> <!-- Row 1 - contains 3 images --> 
      <div class="col-lg-4"> <!-- Each Column represents an image --> 
       <a href = "images/person-2.jpg" data-title = "My First Caption" data-lightbox = "person1"> 
        <img src="images/person-2.jpg" width="200px" class="img-responsive"/> 
       </a> 
      </div> 
      <div class="col-lg-4"> 
       <a href="images/person-2.jpg" data-title = "My Second Caption" data-lightbox = "person1"> 
        <img src="images/person-2.jpg" width = "200px" class="img-responsive"/> 
       </a> 
      </div> 
      <div class="col-lg-4"> 
       <a href="images/person-3.jpg" data-title = "My Third Caption" data-lightbox = "person1"> 
        <img src="images/person-3.jpg" width="200px" class="img-responsive"/> 
       </a> 
      </div> 
     </div><!--Row 1 ends --> 
     <div class = "row"> <!-- row 2 - contains 3 images --> 
      <div class = "col-lg-4"> 
       <a href = "images/person-1.jpg" data-title = "caption 1" data-lightbox = "person1"> 
        <img src = "images/person-1.jpg" width = "200px" class = "img-responsive"/> 
       </a> 
      </div> 
      <div class = "col-lg-4"> 
       <a href = "images/person-2.jpg" data-title = "caption 2" data-lightbox = "person1"> 
        <img src = "images/person-2.jpg" width = "200px" class = "img-responsive"/> 
       </a> 
      </div> 
      <div class = "col-lg-4"> 
       <a href = "images/person-2.jpg" data-title = "caption 3" data-lightbox = "person1"> 
        <img src = "images/person-2.jpg" width = "200px" class = "img-responsive"/> 
       </a> 
      </div> 
     </div><!--Row 2 ends --> 
    </div> 

Answer 1

はそれではなく、3の6枚の画像を示しています。ドキュメントから：セットに結合したい関連イメージのグループがある場合、すべてのイメージに同じdata-lightbox属性値を使用します。 単純な解決策は、セット内で必要な画像のグループごとに異なるデータライトボックス値を使用することです。