lokesh / lightbox2

THE original Lightbox script (v2).
http://lokeshdhakar.com/projects/lightbox2/
MIT License
6.22k stars 1.77k forks source link

lightbox2 + bootstrap3 carousel #519

Closed ingee123 closed 8 years ago

ingee123 commented 8 years ago

I use a bootsrap3 multi item carousel, with verified slide option, for sliding 1 pic in time. By opening the ligthbox, the pics where repeated by the carousel sliding options. pic 1, pic2 - pic 1, pic 2 pic 3 etc. Not pic1, pic2, pic,3, pic4,pic5 and so on. There are 19 images in this turn but shown in the lightbox 76 and anounced with 76. How can I remove this repeat sequences from the lightbox, so the lightbox will show the pictures correctly and the correct numbers of pictures inside this array?


<div class="col-md-12">
                <div class="row">
                <div id="carousel-latest-galerie" class="carousel carousel-latest-galerie slide" data-ride="carousel">
                    <div class="carousel-inner" role="listbox">
                     <div class="item active">
                     <div class="col-xs-12 col-sm-6 col-md-3 padding">
                    <article class="col-md-2">
                        <figure class="thumbnail-effect"><img src="../img/galerie/depesche/thumbnail_depesche_1_all.jpg" alt=""/>
                            <figcaption>
                                <div class="rollover">
                                    <a href="../img/galerie/depesche/depesche_1_all.jpg" rel="lightbox[depesche]" title="Depesche Kassel, 12.03.2016 (pics by Heiko Musiatowski)">
                                        <i class="plus"></i>
                                    </a>
                                </div>
                            </figcaption>
                        </figure>

                        <figure class="thumbnail-effect"><img src="../img/galerie/depesche/thumbnail_depesche_10_eugen.jpg" alt=""/>
                            <figcaption>
                                <div class="rollover">
                                    <a href="../img/galerie/depesche/depesche_10_eugen.jpg" rel="lightbox[depesche]" title="Depesche Kassel, 12.03.2016 (pics by Heiko Musiatowski)">
                                        <i class="plus"></i>
                                    </a>
                                </div>
                            </figcaption>
                        </figure>
                    </article>
                     </div><!-- Ende item active -->
                     </div>

                     <div class="item">
                      <div class="col-xs-12 col-sm-6 col-md-3 padding">
                    <article class="col-md-2">
                        <figure class="thumbnail-effect"><img src="../img/galerie/depesche/thumbnail_depesche_5_reini.jpg" alt=""/>
                            <figcaption class="portrait">
                                <div class="rollover">
                                    <a href="../img/galerie/depesche/depesche_5_reini.jpg" rel="lightbox[depesche]" title="Depesche Kassel, 12.03.2016 (pics by Heiko Musiatowski)">
                                    <i class="plus"></i>
                                    </a>
                                </div>
                            </figcaption>
                        </figure>
                    </article>
                    </div><!-- Ende item -->
                    </div

                        <div class="item">
                        <div class="col-xs-12 col-sm-6 col-md-3 padding">
                   <article class="col-md-2">
                        <figure class="thumbnail-effect"><img src="../img/galerie/depesche/thumbnail_depesche_11_joern.jpg" alt=""/>
                            <figcaption>
                                <div class="rollover">
                                    <a href="../img/galerie/depesche/depesche_11_joern.jpg" rel="lightbox[depesche]" title="Depesche Kassel, 12.03.2016 (pics by Heiko Musiatowski)">
                                       <i class="plus"></i>
                                    </a>
                                </div>
                            </figcaption>
                        </figure>
                        <figure class="thumbnail-effect"><img src="../img/galerie/depesche/thumbnail_depesche_13_ingee.jpg" alt=""/>
                         <figcaption>
                                <div class="rollover">
                                    <a href="../img/galerie/depesche/depesche_13_ingee.jpg" rel="lightbox[depesche]" title="Depesche Kassel, 12.03.2016 (pics by Heiko Musiatowski)">
                                       <i class="plus"></i>
                                    </a>
                                </div>
                            </figcaption>
                        </figure>
                    </article>
                     </div> <!-- Ende item -->
                     </div>
                     </div><!-- Ende carousel-inner -->
                    <a class="left carousel-control" href="#carousel-latest-galerie" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Zurück</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-latest-galerie" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Weiter</span>
                    </a>
                </div><!-- Ende carousel -->
                </div>
                </div>
            </div>

<script>
    (function(){
  $('#carousel-latest-galerie').carousel({ interval: 6000, pause: "hover" });
}());

(function(){
  $('#carousel-latest-galerie .item').each(function(){
    var itemToClone = $(this);

    for (var i=1;i<4;i++) {
      itemToClone = itemToClone.next();

      // wrap around if at end of item collection
      if (!itemToClone.length) {
        itemToClone = $(this).siblings(':first');
      }

      // grab item, clone, add marker class, add to collection
      itemToClone.children(':first-child').clone()
        .addClass("cloneditem-"+(i))
        .appendTo($(this));
    }
  });
}());
    </script>

website: http://www.rocktail-ks.de/html/gallery.html

I think it must be a problem with the clone elements, but I dont know the correct solution.``

lokesh commented 8 years ago

Closing out old issues.

If you still need help, please post your question on Stackoverflow. See more details here: http://lokeshdhakar.com/projects/lightbox2/#help

Github Issues is for bugs only. Thanks.