Jquery Fancybox问题。复制图像

使用模块fancybox，我尝试在模式页面（fancybox）中显示照片库

问题是这些图像显示了11次，我不知道为什么。我已经搜索了，并且使用了正确的语法

这是我的密码：

JQUERY

$(".testGatorade[rel=group1]").fancybox({
            'speedIn'        :    200,
            'speedOut'        :    200,
            'overlayShow'    :    false,
            'modal'          : true,
            'showCloseButton' : true,
            'titleShow'       : true,
            'titlePosition'   : 'over',
            'titleFormat'        : function(title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">Image ' + currentIndex + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
            }
        });

$（“.testGatorade[rel=group1]”）。fancybox({
“speedIn”：200，
“加速输出”：200，
“叠加显示”：错误，
“模态”：正确，
“showCloseButton”：true，
“标题秀”：没错，
“标题位置”：“结束”，
“标题格式”：函数（标题、currentArray、currentIndex、currentOpts）{
返回'Image'+currentIndex+'/'+currentArray.length+（title.length？''+title:''）+''；
}
});

HTML

谢谢你的帮助

---

我从4天开始就在处理它。

我通过调整jQuery选择器（我刚刚修改了所选的类名）解决了fancybox中的重复图像。

我有一个类似的问题，在我的情况下，它是由不符合标准的使用a标签引起的。 我在a-tag（divs和imgs）中使用了非内联标记，根据html5标准，这应该是可以的（参见此处），但在此之前是无效的。 Mozilla和Chrome通过复制/乘以a标签将其呈现为标准的conform a标签。（您可以使用DOM检查器进行验证）

重复的a标签意味着你的fancybox图库中有重复的图像

解决方案是使用标准的conform a标签，因此：

<div>
 <a href="..." class="fancybox" rel="gallery1">
  <img src="..." alt="..." />
  <div class="overlay">
   <div class="overlay_title">...</div>
   <div class="overlay_text"><p>...</p></div>
  </div>
 </a>
</div>

使用以下命令：

<div>
 <a href="..." class="fancybox" rel="gallery1" style="position: absolute; top: 0px; width: 100%; height: 100%; z-index: 100;">
  <span>&nbsp;</span>
 </a>
 <img src="..." alt="..." />
 <div class="overlay">
  <div class="overlay_title">...</div>
  <div class="overlay_text"><p>...</p></div>
 </div>
</div>

...

---

也许我可以帮你…

你能在JSFIDLE中复制吗？不，我不能，这是一个插件。。。fancybox很烂，改用colorbox：尝试更新到fancybox v2，它一点也不烂。。。您可以将插件添加到JSFIDLE—您只需要一个源代码的url，就可以将其作为资源添加。

<div>
 <a href="..." class="fancybox" rel="gallery1" style="position: absolute; top: 0px; width: 100%; height: 100%; z-index: 100;">
  <span>&nbsp;</span>
 </a>
 <img src="..." alt="..." />
 <div class="overlay">
  <div class="overlay_title">...</div>
  <div class="overlay_text"><p>...</p></div>
 </div>
</div>