Lightbox Bootstrap gallery duplicating each image when opened up - html

Question

Hi I'm having an issue with Lightbox where it will duplicate my images from my gallery. for example if I put in a row of 3 images, it will display 3 images on the screen, but when clicked on, it will display 6 images.
Here is some code, to give you a better idea of what i'm doing and what my problem is.
<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

It shows the 6 images instead of 3 because you are using data-lightbox = "person1" for all 6 images. From the Docs : If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images.
Simple solution is to use a different data-lightbox value for each group of images you want in a set.

Answer 2

I had a similar trouble with lightbox duplicating images, in my case i had a div with inside it an image, an icon and some text. I set the anchor for lightbox on the external div and it duplicated the image three times (since there were three elements inside it). I found a solution retyping the anchor for each single element with different data-lightbox, and everything worked fine. Hope this can help you sorting out your situation.
From this that showed my image three times:
<div class="col-md-3 wow fadeInUp" data-wow-delay="0.1s">
<a href="img/campi/campob.jpg" data-lightbox="campob" title="Campo B">
<div class="about-col">
<div class="img">
<img src="img/campi/campob.jpg" alt="" class="img-fluid">
<div class="icon"><i class="ion-ios-search"></i></div>
</div>
<h2 class="title"><a>Campo B</a></h2><br>
</div>
</a>
</div>
To this, that works fine:
<div class="col-md-3 wow fadeInUp">
<div class="about-col">
<div class="img">
<a href="img/campi/campoa.jpg" data-lightbox="campoa2" title="Campo A">
<img src="img/campi/campoa.jpg" alt="" class="img-fluid">
</a>
<a href="img/campi/campoa.jpg" data-lightbox="campoa" title="Campo A">
<div class="icon"><i class="ion-ios-search"></i></div>
</a>
</div>
<h2 class="title">
<a href="img/campi/campoa.jpg" data-lightbox="campoa3" title="Campo A">
Campo A
</a>
</h2>
<br>
</div>
</div>