Question

我正在处理一个客户端的部分，其中有两个图像显示在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'
});

非常感谢任何解决此问题的帮助。

感谢。

Answer 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({ /* ... */ )};代码，看看是否能解决您的问题。

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

不知怎的，你自动添加分组，你不能＆＃39;请参阅源代码，但如果您使用的是元素检查器，则可以使用。

为什么Fancybox 1.3.4会弹出两个图像？

2 个答案: