1

第一个图像正在复制。单击图像目标后，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>
4

1 回答 1

0

您无需定位内联内容，也无需在隐藏的 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'
    });
});
于 2013-05-21T16:40:39.693 回答