2

FancyBox 2 を使用していますが、オーバーレイの色をカスタマイズしたいと考えています。divこの色を、クリックされた親と一致させたいと思います。

例えば：

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

ファンシーボックスコード

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

上記のコードで正しい色を自動的に設定するにはどうすればよいですか?

4

1 に答える 1

0

最も簡単な方法は、コールバックを使用してその場で親の色を取得し、次のようにセレクター beforeShowに直接適用することです。.fancybox-overlay

$(".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
        });
    }
});​

デモを見る

于 2012-12-17T18:40:19.500 に答える