Question

使用模块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>';
            }
        });

HTML

<div id="slider1">
                <a class ="testGatorade" href = "images/eagle.jpg" rel="group1" title = "Test de titre">
                    <img src = "images/eagle.jpg" width = "300" height = "300"/>
                </a>
                <a class ="testGatorade" href = "images/ring.jpg" rel="group1"></a>
                <a class ="testGatorade" href = "images/tarantula.jpg" rel="group1"></a>
            </div>

感谢您的帮助，

我从4天开始工作。

Answer 1

我通过调整jQuery选择器解决了fancybox中的重复图像（我刚修改了选定的类名）。More practical information about usage of fancybox

Answer 2

我有类似的问题，在我的情况下，它是由非标准符合使用a-tag引起的。我在a-tag（div和imgs）中有非内联标签，这应该是html5标准（参见这里：http://html5doctor.com/block-level-links-in-html-5），但在此之前无效。 Mozilla和Chrome通过复制/乘以a-tag将其呈现为符合标准的a-tag。（您可以使用DOM Inspector验证）

复制a-tags表示您的fancybox图库中的重复图像...

解决方案是使用符合标准的a-tag，而不是：

<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>

也许我可以帮忙解决这个问题......

Fancybox问题。重复的图像

2 个答案: