Question

我想控制我的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>

你会看到包含第二张图片（pic2.jpg）的'a'标签有一个'flag'类。这是因为我希望它的样式与另一个不同。比方说，我希望它有一个绿色背景。

我可以使用类似

的所有实例实现这一点

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

但这适用于所有显示的图片。很明显，我的'flag'类只适用于MY元素，而不适用于生成的fancybox代码。

有什么办法可以控制生成代码的特定实例吗？

我知道了wrapCSS属性，但是，正如我所看到的那样，这会将一个包含类放在所有图像中，而不仅仅是指定的...或者我错过了什么？

Answer 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

Answer 2

感谢@Janis指出我正确的方向！

使用以下代码附加到 beforeShow 事件，我能够达到可接受的效果......

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

我遇到的主要问题是能够获得当前元素的属性

$(this.element)

允许我这样做。

fancybox针对不同图像的不同风格

2 个答案: