jquerycssfancybox

How can I change the overlay color in fancyBox v2


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