How can I change the overlay color in fancyBox v2

Question

In fancyBox version 1 there was the overlayColor parameter, but in version 2 it doesn't seem to work anymore.

Editing the CSS doesn't work because it gets over-written by the JavaScript in the plugin.

Any ideas?

Answer 1

Fancybox v2.x API option are new and are not compatible with previous versions so overlayColor has been replaced by the helpers => overlay => css => background-color option.

You don't have to mess with the original (js or css) files either as suggested by @Sparky672 (that is a bad practice idea). You can set that option in your custom script ... so having this html for instance:

<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