0

我正在为一个在 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'
});

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

谢谢。

4

2 回答 2

1

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

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

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

然后，在custom.js你的第 21 行调用这个：

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

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

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

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

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

于 2013-08-13T23:57:56.087 回答
0

可能是因为这个：

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>';
}

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

于 2013-08-13T23:51:55.043 回答