为什么 Fancybox 1.3.4 会弹出两张图片？答案

【问题标题】：Why do two images pop up with Fancybox 1.3.4?为什么 Fancybox 1.3.4 会弹出两张图片？
【发布时间】：2013-08-13 23:45:08
【问题描述】：

我正在为一个在 Fancybox 1.3.4 显示器中显示两个图像的客户端开发一个部分：http://corecubed.com/portfolio/project/atlanta-home-care-partners-alzheimers-whisperer174-brochure

当您单击图像时，它不仅会弹出一个图像，还会弹出两个图像，并且它们的外观也不同。最上面的图片有一个不同的关闭按钮，还可以选择放大到全屏。

我没有构建这个，所以我不确定这里发生了什么，并且可以使用一些帮助来解决它。

这里是html：

<div class="featured featured1">
    <a class="preloading" href="http://corecubed.com/images/uploads/AHCP_AlzWhisperer_Broc_Portfolio_XL.jpg"><img src="http://corecubed.com/images/uploads/AHCP_AlzWhisperer_Broc_Portfolio_Medium.jpg" alt="" /></a>
</div><!-- end .featured -->

这是该部分的 jQuery：

jQuery(".preloading").fancybox({
'showTitle'     : false,
'transitionIn'      : 'fade',
'transitionOut'     : 'fade',
'scrolling'         : 'no'
});

任何解决此问题的帮助将不胜感激。

谢谢。

【问题讨论】：

标签： jquery fancybox

【解决方案1】：

这是因为您将 PrettyPhoto 和 Fancybox 灯箱附加到相同的元素。

首先，您将 FancyBox 附加到第 38-44 行的所有 .preloading 元素：

jQuery(".preloading").fancybox({
    'showTitle' : false,
    'transitionIn' : 'fade',
    'transitionOut' : 'fade',
    'scrolling' : 'no'
});

然后，在custom.js 的第 21 行，您将调用：

my_lightbox("a[rel^='prettyPhoto'], a[rel^='lightbox']",true);

在选择器参数中的所有匹配元素上初始化 PrettyPhoto（custom.js 的第 1528-1529 行）：

jQuery($elements).prettyPhoto({ /* ... */ });

解决方案是选择一个灯箱插件并坚持使用它，或者至少停止使用两者定位相同的图像。

尝试删除jQuery(".preloading").fancybox({ /* ... */ )}; 代码，看看是否能解决您的问题。

【讨论】：

【解决方案2】：

可能是因为：

jQuery("a[rel=group]").fancybox({
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'titlePosition'     : 'over',
    'titleFormat'           : function(title, currentArray, currentIndex, currentOpts) {
    return '<span id="fancybox-title-over">Image ' +  (currentIndex + 1) + ' / ' + currentArray.length + ' ' + title + '</span>';
}

不知何故，您也在自动添加分组，您无法在源代码中看到，但如果您使用的是元素检查器，则可以。

【讨论】：