我遇到了Fancybox2的问题,从一个图库图片转换到另一个图库图像时,透明度非常小。你可以在他们的网站上看到一个粗略的例子(图片库的例子,第二行):http://fancyapps.com/fancybox/#examples 当图像过渡到下一个图像时,您可以在很短的时间内看到背景。
现在否则这不会是一个大问题,但在我的一个网站上有2个非常相似的图像,并且它们具有缓慢的“淡入淡出”过渡效果,因此看起来它们有点像来回变形。这里的问题非常明显,因为当转换发生时,您可以看到图像背后的所有网站文本。我试过改变fancybox .css和.js中的各种东西,但似乎没有任何帮助。
我也尝试使用较旧的Fancybox 1.x,它没有问题,但它也没有交叉淡入淡出,因此在下一张图像开始淡入之前图像完全消失。所以我可以也没用。
如果有人能够弄清楚它是什么导致了一点点的透明度,那将非常感激。感谢。
答案 0 :(得分:1)
好吧,我终于明白了,所以我会把它放在这里以防万一其他人在想。您只需要在fancybox .js文件的以下部分中将不透明度从0.1更改为1.0:
changeOut: function () {
var previous = F.previous,
effect = previous.prevEffect,
endPos = { opacity : 1.0 },
...
这样,当旧图像开始淡出时,下一个图库图像就已经可见了。显然,这应该仅用于具有“淡入淡出”转换的相同大小的图像,因此应该将更改变为.js文件的副本,以便在需要时加载它。
编辑:“changeIn”功能的“startPos.opacity”也可以从0.1更改为0.0,以使转换开始更加顺畅。
答案 1 :(得分:0)
在您在fancybox网站上引用的示例中,fancybox的overlay
具有透明度,因此您始终可以看到背景,但是,您始终可以使用纯色和(正文)背景设置fancybox的叠加层背景将不可见。
方法1 (rgba)
$(".fancybox").fancybox({
helpers: {
overlay: {
css: {
'background': 'rgba(64, 64, 64, 1)'
}
}
}
});
...最后一个数字设置了叠加层的透明度,因此 1 =完整实体(没有可见的主体背景),无论是否有慢速淡入淡出过渡。
参见 JSFIDDLE
方法2 (hex)
$(".fancybox").fancybox({
helpers: {
overlay: {
css: {
'background': '#4a4a4a'
}
}
}
});
...设置一个十六进制颜色值,并且fancybox的叠加层将是完整的实体(没有可见的主体背景)。
参见 JSFIDDLE