jquery - Fancybox顯示第一個圖像的兩倍

我使用fancybox在幻燈片放映中顯示六張圖片，但第一張圖片出現兩次，我找不到原因。如果我點擊第一張圖片，當點擊前一張時，圖片將會出現。jquery - Fancybox顯示第一個圖像的兩倍

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

來源

2016-05-22 sid

我改變了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/

來源

2016-05-22 10:21:41

jquery - Fancybox顯示第一個圖像的兩倍

回答

相關問題