0

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

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

这是我的代码：

查询

$(".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 天就开始工作了。

4

2 回答 2

0

我通过调整jQuery选择器解决了fancybox中的重复图像（我刚刚修改了选定的类名）。更多关于fancybox使用的实用信息

于 2014-05-17T12:54:39.057 回答
0

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

重复的 a-tags 意味着您的幻想库中的重复图像......

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

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

也许我可以帮助解决这个...

于 2015-09-11T20:22:15.453 回答