我正在使用fancybox在幻灯片放映中显示六张图片。但是第一张图片出现两次,我找不到原因。如果我点击第一张图片,点击上一张图片时图像会显示为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 -->
答案 0 :(得分:0)
我改变了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>