jquery - Fancyboxが最初の画像を2回表示する

Question

fancyboxを使用してスライドショーで6枚の画像を表示していますが、最初の画像が2回表示され、その理由が見つかりません。最初の画像をクリックすると、前のtwiseをクリックすると画像が表示されます。

$(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

私は、最初のタグがそのように、このようになり、あなたのHTMLを編集間違った方法で閉鎖された、HTMLを変更しました。

<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/