Fancybox2在下一个/上一个图库图像转换期间略微透明

时间:2013-01-21 19:16:05

标签: jquery fancybox transparency opacity fancybox-2

我遇到了Fancybox2的问题,从一个图库图片转换到另一个图库图像时,透明度非常小。你可以在他们的网站上看到一个粗略的例子(图片库的例子,第二行):http://fancyapps.com/fancybox/#examples 当图像过渡到下一个图像时,您可以在很短的时间内看到背景。

现在否则这不会是一个大问题,但在我的一个网站上有2个非常相似的图像,并且它们具有缓慢的“淡入淡出”过渡效果,因此看起来它们有点像来回变形。这里的问题非常明显,因为当转换发生时,您可以看到图像背后的所有网站文本。我试过改变fancybox .css和.js中的各种东西,但似乎没有任何帮助。

我也尝试使用较旧的Fancybox 1.x,它没有问题,但它也没有交叉淡入淡出,因此在下一张图像开始淡入之前图像完全消失。所以我可以也没用。

如果有人能够弄清楚它是什么导致了一点点的透明度,那将非常感激。感谢。

2 个答案:

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