Fancybox: Opacity Issues

Question

Am I right that the following syntax / code is not working (anymore)?

$(".fancybox").fancybox({ helpers : { overlay : { opacity : 0.9, css : { 'background-color' : '#f00' } } } }); 

check: http://jsfiddle.net/jRsjK/3375/

... but just that?

 $(".fancybox").fancybox({ helpers : { overlay : { css : { 'background-color' : 'rgba(255, 0, 0, .9)' } } } }); 

check: http://jsfiddle.net/jRsjK/3374/

Answer 1

If you use the rgba(255, 0, 0, .9) format rgba(255, 0, 0, .9) , then the css property should be background , not background-color , as in the above code example. Then your script should look like this:

 $(".fancybox").fancybox({ helpers : { overlay : { css : { 'background' : 'rgba(255, 0, 0, .9)' } } } }); 

... see JSFIDDLE (I set a lower opacity value to make it more obvious)

Keep in mind that if you do not set any background property, fancybox will use a translucent .png image as the background (fancybox_sprite.png). If you set the background-color property (as in the examples above), the png sprite will still be used and may affect the opacity effect you are looking for.

It seems that the opacity API option for overlay been removed from version 2.1.x (the latter was used by v2.0.6)