Question

第一张图片正在复制。单击作为图像的目标后，Photo1在Photo2和Photo3之前显示两次。

脚本：

<script type="text/javascript">
  $(document).ready(function(){
    $(".fancybox5")
    .attr('rel', 'gallery')
    .fancybox({
    openEffect: 'elastic',
    prevEffect: 'fade',
    nextEffect: 'fade'
 });
});
</script>

html标记：

<div>       
<a class="fancybox5" href="#inline5">  <div id="pics"><img src="images/pic.png" width="165" height="167" alt="Pics" border="0" /></div></a>
<div id="inline5" style="width:100%;display: none;">
  <a class="fancybox5" href="media/photo3.jpg"><img src="media/photo3.jpg" width="400" height="500" /></a>
  <div class="hidden">
  <a class="fancybox5" href="media/photo1.jpg"><img src="media/photo1.jpg" width="400" height="500" /></a>
  <a class="fancybox5" href="media/photo2.jpg"><img src="media/photo2.jpg" width="400" height="500" /></a>
  </div>

  </div>
  </div>

Answer 1

您不需要定位内联内容，也不必使用隐藏div中的缩略图。定位您的可见链接中的第一张图片，以便以这种方式调整您的HTML

<div> 
    <a class="fancybox5" href="media/photo1.jpg"><img src="media/photo1.jpg" width="400" height="500" /></a>
    <div id="inline5" style="display: none;"> 
        <a class="fancybox5" href="media/photo3.jpg"></a>
        <a class="fancybox5" href="media/photo2.jpg"></a>
    </div>
</div>

并且此脚本应该可以正常工作

$(document).ready(function () {
    $(".fancybox5")
        .attr('rel', 'gallery')
        .fancybox({
        openEffect: 'elastic',
        prevEffect: 'fade',
        nextEffect: 'fade'
    });
});

FANCYBOX中的图像复制

1 个答案: