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>

你会看到包含第二张图片（pic2.jpg）的“a”标签有一个“flag”类。这是因为我希望它的样式与其他样式不同。例如，假设我希望它具有绿色背景。

我可以通过类似的方式为所有实例实现这一点

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

但这适用于所有显示的图片。显然，我的“标志”类仅适用于我的元素，而不适用于生成的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 回答