0

我对 Fancybox2 有疑问，在从一个画廊图像过渡到另一个画廊图像的过程中，透明度非常低。您可以在他们的网站上看到一个粗略的示例（图片库示例，第二行）： http: //fancyapps.com/fancybox/#examples 当图像转换到下一个时，您可以在非常短时间。

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

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

如果有人能弄清楚是什么导致了那一点点的透明性，那将不胜感激。谢谢。

4

2 回答 2

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，以使过渡开始更加顺畅。

于 2013-02-26T20:04:01.957 回答
0

在您在fancybox网站上引用的示例中，fancyboxoverlay具有透明度，因此您始终可以看到背景，但是，您始终可以将fancybox的叠加层背景设置为纯色，而（主体）背景将不可见。

方法 1 (rgba) 

$(".fancybox").fancybox({
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(64, 64, 64, 1)'
            }
        }
    }
});

... 最后一个数字设置叠加层的透明度，因此1 = 全实心（没有可见主体的背景），无论是否有缓慢的淡入淡出过渡。

见JSFIDDLE

方法 2（十六进制） 

$(".fancybox").fancybox({
    helpers: {
        overlay: {
            css: {
                'background': '#4a4a4a'
            }
        }
    }
});

...设置一个十六进制颜色值，fancybox 的覆盖将是全实心的（没有可见的身体背景）。

见JSFIDDLE

于 2013-01-22T00:44:51.817 回答