Question

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

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

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

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

Answer 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，以使转换开始更加顺畅。

Answer 2

在您在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

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

2 个答案: