Fancybox显示第一张图片两次

Question

我正在使用花哨的框在幻灯片放映中显示六张图片。但是第一张图片出现了两次，我找不到原因。如果我单击第一张图片，则单击上一张图片时将显示为"上一个"图像"。

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