Question

I’m using FancyBox 2 and I would like to customize the overlay color; I would like this color to match the parent div that is clicked.

For example:

<div style="background-color:#000"><a class="fancybox"...><img ...></div>
<div style="background-color:#111"><a class="fancybox"...><img ...></div>

Fancybox Code

$(".fancybox").fancybox( {
    padding:0,
    helpers : {
        overlay : { 
            css : { 'background-color' :  **PARENT'S COLOR** }
        }
    }
});

How do I automatically set the correct color in the code above?

Answer 1

The easiest way is to get the parent’s color on the fly using the beforeShow callback and apply it directly to the .fancybox-overlay selector like :

$(".fancybox").fancybox({
    beforeShow: function() {
        var parentColor = $(this.element).parent().css('backgroundColor');
        $(".fancybox-overlay").css({
            "backgroundColor": parentColor,
            "backgroundImage": 'none' // optional if you prefer a solid color
        });
    }
});​

See DEMO