CODEWITHSUNDEEP
htmlbootstrap-modalgallerylightbox
seanrs97
seanrs97

Reputation: 333

Lightbox Bootstrap gallery duplicating each image when opened up

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>

Upvotes: 0

Views: 1040

Answers (2)

Gioele
Gioele

Reputation: 1

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>

Upvotes: 0

Macsupport
Macsupport

Reputation: 5444

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.

Upvotes: 1

Related Questions