Question

我想知道是否有人可以帮助我解决这个问题。我基本上试图将此"Change overlay color and opacity"与此"Launch fancyBox manually on page load"结合起来。

我目前的代码是..

$.fancybox.open([
{
    height: 500,
    width: 350,
    content : '<a href="#"><img src="http://www.myimageurl.jpg"></a>',

},

], {
padding : 0   
});

这似乎对于在页面加载时显示的图像链接非常有效，但我无法弄清楚如何获得所有内容的背景/颜色叠加＆＃34;背后＆＃34; fancybox图片。有什么建议吗？

Answer 1

只需使用逗号

分隔每个API选项即可

$.fancybox.open([{
    href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
    title: '1st title'
}, {
    href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
    title: '2nd title'
}, {
    href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
    title: '3rd title'
}], {
    padding: 0, //<== comma here
    // then your overlay color option
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(58, 42, 45, 0.95)'
            }
        }
    } // <== if you want another option after this, don't forget the comma
});

参见 JSFIDDLE

编辑：

IE9及以下版本不支持CSS rgba()，因此您可能需要设置一个后备选项，如：

var bk = navigator.userAgent.match(/msie [6-9]/i) ? "rgb(58, 42, 45)" : "rgba(58, 42, 45, 0.95)";

如果浏览器是IE9或更低版本，上面的变量将使用rgb()后备颜色。然后只需在helpers选项中设置变量，如：

helpers: {
    overlay: {
        css: {
            'background': bk
        }
    }
}

请参阅分叉 JSFIDDLE

页面加载时Fancybox覆盖颜色

1 个答案: