jquery - Fancybox zeigt das erste Bild zweimal

Question

Ich benutze die Fancybox, um sechs Bilder in einer Diashow zu zeigen.Aber das erste Bild erscheint zweimal, und ich kann den Grund nicht finden. Wenn ich auf das erste Bild klicke, wird das Bild Twise angezeigt, wenn ich auf die vorherige Twise klicke.

$(document).ready(function() { 
    $(".fancybox").fancybox() 
}); 

<div class="cbp-item item photography lifting"> 
    <center><h3>Before</h3></center><hr><br> 
    <a rel="gallery" class="fancybox" href="img/slider/reve/Before1.jpg" title="Reverse Engineering"> 
    <div class="cbp-caption-defaultWrap"> 
     <img src="img/slider/reve/Before1.jpg" alt="Crexis"> 
     <a rel="gallery" class="fancybox" href="img/slider/reve/Before2.jpg" title="Before"></a> 
     <a rel="gallery" class="fancybox" href="img/slider/reve/Before3.jpg" title="Before"></a> 
     <a rel="gallery" class="fancybox" href="img/slider/reve/Before4.jpg" title="Before"></a> 
     <a rel="gallery" class="fancybox" href="img/slider/reve/Before5.jpg" title="Before"></a> 
     <a rel="gallery" class="fancybox" href="img/slider/reve/Before6.jpg" title="Before"></a> 
     <div class="item_icon"> 
     <p><i class="fa fa-camera-retro"></i></p> 
     <p>Reverse Engineering</p> 
     </div> <!-- End of .item_icon --> 
    </div> <!-- End of .cbp-caption-defaultWrap --> 
    </a> <!-- End of .fancybox --> 
    <div class="cbp-caption-activeWrap"> 
    <div class="center-details"> 
     <div class="details"> 
     <h2 class="name">Reverse Engineering</h2> 
     <p class="tags">Before</p> 
     </div> <!-- End of .details --> 
    </div> <!-- End of .center-details --> 
    </div> <!-- End of .cbp-caption-activeWrap --> 
</div> <!-- End of .cbp-item.item.photography.lifting --> 

Answer 1

ich die html geändert, die einen Tag in einer falschen Weise geschlossen wurde, so dass Ihre HTML bearbeiten, so sein.

<div class="cbp-item item photography lifting"> 
    <center> <h3>Before</h3></center><hr><br> 


<a rel="gallery" class="fancybox" href="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia18351-1041.jpg?itok=TyivXWrM" title="Reverse Engineering"><img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia18351-1041.jpg?itok=TyivXWrM" alt="Crexis"></a> 


    <div class="cbp-caption-defaultWrap"> 



     <a rel="gallery" class="fancybox" href="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" title="Before"></a> 
     <a rel="gallery" class="fancybox" href="https://images.contentful.com/256tjdsmm689/2T0QeKcvR6MSsckuKoYIwS/b57d12107fc5eb635e294ed1c76cbbac/feature-gettyimages.jpg" title="Before"></a> 
     <a rel="gallery" class="fancybox" href="http://sabiaunite.com/uploads/gallery/12112013-080739AM-2.jpg" title="Before"></a> 
     <a rel="gallery" class="fancybox" href="https://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg" title="Before"></a> 

     <div class="item_icon"> 

     <p><i class="fa fa-camera-retro"></i></p> 
     <p>Reverse Engineering</p> 
     </div> 

    </div> 



    <div class="cbp-caption-activeWrap"> 

    <div class="center-details"> 
     <div class="details"> 

     <h2 class="name"> 
      Reverse Engineering 
     </h2> 

     <p class="tags"> 
      Before 
     </p> 
     </div> 
    </div> 

    </div> 

</div> 

https://jsfiddle.net/IA7medd/zrxL3unp/