区分fancybox的自定义css

Question

我正在尝试在不同的花式盒的样式中做一些客户强制的不一致。

我似乎无法找出一种方法来区分哪个fancybox是使用类或ID打开的。

有没有办法做到这一点？

Answer 1

Fancybox 2有一个wrapCSS选项，可让您将自定义类添加到灯箱以进行样式设置。

像这样：

$(".fancybox").fancybox();

$(".photo").fancybox({
    wrapCSS : 'photo-lightbox-class'
});

$(".video").fancybox({
    wrapCSS : 'video-lightbox-class'
});

Answer 2

您可以使用对fancybox（）和onX参数的单独调用来实现此目的。例如：

$('.ProductThumbImage a').fancybox({
    padding: 30,
    margin: 0,
    autoScale: true,
    onStart: function() {
        $('#fancybox-content').css('padding', '8px');
    },
    onClosed: function() {
        $('#fancybox-content').css('padding', '0');
    }
});

显然，所有实例都使用相同的fancybox，因此您可以根据点击的链接简单地添加/删除样式或类。