CODEWITHSUNDEEP
jqueryfancyboxfancybox-2
boyce
boyce

Reputation: 17

Fancybox Overlay Opacity

I am using the fancybox plugin version 2.0.6

I am trying to change the overlay opacity as detailed in the documentation, but can't get it to work. Can anyone advise on how I might be doing this wrong.

Thanks.

Here's what I have:

    $(function () {
        $(".fancybox")
        .attr('rel', 'gallery')
        .fancybox({
            padding : 0,
            margin : 0,
            arrows: false,
            closeBtn: false,
            closeClick: true,
            openEffect : 'none',
            openSpeed : 100,
            closeEffect : 'none',
            closeSpeed : 100,
                helpers : {
                    title : null,
                    speedIn: 0,
                    speedOut: 0,
                    opacity: 0.8,
                }
            });
        });

Upvotes: 0

Views: 13939

Answers (2)

Jack Barham
Jack Barham

Reputation: 3209

I found this option to work best, it uses CSS RGBA...

$(".fancybox").fancybox({
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 42, 45, 0.95)'
            }
        }
    }
});

Here is the official fiddle: http://jsfiddle.net/jRsjK/

Upvotes: 2

JFK
JFK

Reputation: 41143

Try the helpers option this way:

helpers : {
 overlay : {
  speedIn    : 0,
  speedOut   : 0,
  opacity    : 0.5
 },
 title : null
}

EDIT (Sept 12, 2012) : The option helpers =>overlay=>speedIn has been removed since fancybox v2.1. It's still valid for v2.0.6 and below.

Upvotes: 4

Related Questions