How can I change the overlay color in fancyBox v2

Issue

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?

Solution

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

Answered By - JFK