0

fancyboxグループの一部の画像だけを制御したいと思っています。

これは私がこの分野で尋ねた別の質問に関連していますが、問題の別の部分に移っているので、私は新しい質問を始めました。

与えられたコード

<div id="gallery"> 
    <a href="photos/pic1.jpg" rel="lightbox-left" title=""> 
        <img src="photos/pic1_2.jpg" /></a> 

    <a href="photos/pic2.jpg" rel="lightbox-left" title="my title" class="flag"> 
        <img src="photos/pic2_2.jpg"  /></a>
</div>

2番目の画像（pic2.jpg）を含む「a」タグには「flag」のクラスがあることがわかります。これは、他のスタイルとは異なるスタイルにしたいからです。たとえば、背景を緑色にしたいとします。

私は次のようなものですべてのインスタンスに対してそれを達成することができます

.fancybox-skin {
    background-color: green;
}

ただし、表示されているすべての画像に適用されます。明らかに、私のクラスの「フラグ」はMY要素にのみ適用され、生成されたfancyboxコードには適用されません。

生成されたコードの特定のインスタンスを制御する方法はありますか？

私はwrapCSSプロパティを知っていますが、それを見ると、指定された画像だけでなく、すべての画像の周りに包含クラスが配置されます...または何かが足りませんか？

4

2 に答える 2

1

コールバックを使用して、現在のアイテムに基づいてスタイルを設定できます。例えば：

$(".fancybox").fancybox({
    beforeShow: function() {

        if (this.index == 0) {
            this.skin.css("background-color", "green");

        } else if (this.index == 1) {
            this.skin.css("background-color", "blue");
        }

    }
});​

実際の動作を参照してください-http://jsfiddle.net/LehkV/

パラメータを個別に設定するにはさまざまな方法があります。http：//fancyapps.com/fancybox/#usefulの＃15を参照してください。

于 2012-10-31T15:58:12.937 に答える
0

私を正しい方向に向けてくれた@Janisに感謝します！

beforeShowイベントに添付された次のコードを使用して、許容できる効果を得ることができました...

        $('#gallery a').fancybox({          
        beforeShow: function () {
            if ($(this.element).hasClass('flag')) {
                this.skin.css("background-color", "green");                
            }
        }, ...etc...

私が抱えていた主な問題は、現在の要素のプロパティを取得できることでした。

$(this.element)

許可してくれました。

于 2012-11-01T11:30:33.870 に答える