How to change overlay color in fancyBox v2

Question

There was an overlayColor parameter in fancyBox version 1, but in version 2 it no longer works.

CSS editing does not work because it is overwritten by JavaScript in the plugin.

Any ideas?

Answer 1

The Fancybox v2.x API option is new and incompatible with previous versions, so overlayColor been replaced with helpers => overlay => css => background-color option.

You should not mess with the source (js or css) files either at the suggestion of @ Sparky672 (this is a bad idea ) You can set this parameter in your custom script ... so with this html for example:

 <a class="fancybox" href="images/01.jpg">open fancybox with a red overlay</a> 

use a custom script like:

 $(".fancybox").fancybox({ helpers : { overlay: { opacity: 0.8, // or the opacity you want css: {'background-color': '#ff0000'} // or your preferred hex color value } // overlay } // helpers }); // fancybox 

Answer 2

Firefox (and IE 9) doesn't like to set the opacity of the overlay. Chrome does a great job of this, but in Firefox + IE9, opacity is applied to the popup. They seem to perform layering differently for overlay and content.

Tested in Fancybox 2.1.4

  helpers: { overlay: { css: { 'background': 'rgba(0, 0, 255, 0.5)' } } } 

If you set the value to RGBA then it will work. You should use background , not background-color , to override the default css value.

Please note that the plugin itself uses translucent PNG for overlay. This is good, but has two recessions. Firstly, it should load, and if you do not pre-load it, the fade effect may stutter a little when you first open the pop-up window. Secondly, most browsers suppress requests after you submit the form, so if you do not pre-load the PNG, then there will be no overlays at all.

Answer 3

You can target the style tag that applies to the div #fancybox-overlay using an attribute selector, for example:

CSS

 #fancybox-overlay[style] { background-color: blue !important; } 

Answer 4

From Fancybox v1.3:

Default cover options :

• overlayOpacity: 0.3
• overlayColor: # 666

Working example :

 $(".fancybox").fancybox({ overlayOpacity : 0.8, // Set opacity to 0.8 overlayColor : "#000000" // Set color to Black }); 

Answer 5

Parameters built into fancyBox v1 will not work if they are not built into fancyBox2. And according to the fancyBox v2 documentation , there is no such option overlayColor .

My suggestion is to try changing the background color in the jquery.fancybox.css file to #fancybox-overlay .

 #fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 1001; background: #000; /* <<-- this one */ } 

---

EDIT based on comments:

Technically the correct answer: you cannot set the overlayColor parameter because the new version will not accept this deprecated parameter.

However, if you want to edit the plugin, this should do it ...

around line 1308 jquery.fancybox.js you will see overlay options.

 opts = $.extend(true, { speedIn : 'fast', closeClick : true, opacity : 1, css : { background: 'black' // <-- this one } }, opts); this.overlay = $('<div id="fancybox-overlay"></div>').css(opts.css).appendTo('body'); 

Answer 6

Css # fancybox-overlay doesn't seem to work for me (fb2), I use .fancybox-skin works fine.

 .fancybox-skin{ background-color:#121212!important; } 

Answer 7

In the latest version, the helper needs a parent parameter, for example:

 $.fancybox.helpers.overlay.open({parent: $('body')}); 

Answer 8

use css for bg:

 #fancy_bg { background-color:000000 !important; }