CODEWITHSUNDEEP
jqueryfancybox
mtemp
mtemp

Reputation: 47

Fancybox: problems with opacity

am I right that the following syntax/code doesn't work (anymore)?

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

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

... but only this?

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

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

Upvotes: 0

Views: 3396

Answers (1)

JFK
JFK

Reputation: 41143

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

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

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

Bear in mind that if you don't set any background property, fancybox will use a semitransparent .png image as background (fancybox_sprite.png). If you set the background-color property (as in your examples above), the png sprite still will be used and may affect the opacity effect you are looking for.

It seems like the opacity API option for the overlay was removed since version 2.1.x (last used was v2.0.6)

Upvotes: 4

Related Questions