区分fancybox的自定义CSS。

Question

我正在尝试解决一些客户要求的不同fancybox样式之间的不一致性。

我似乎找不到通过类或ID等方式区分哪个fancybox是打开状态的方法。

有没有什么办法可以实现这个需求？

- Joren

Answer 1

Fancybox 2提供了一个wrapCSS选项，它允许您为样式添加自定义类到灯箱中。

就像这样:

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

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

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

- Dominic

---

谢谢你加1。实际上，我已经在fancybox文档中找到了它，但只有这个答案帮助我意识到它是将类添加到.fancybox-wrap，而不仅仅是遵循属性名称的CSS样式。所以也许开发人员可以将其命名为addClass，以使其更清晰。 - vladkras

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，因此您可以根据单击的链接添加/删除样式或类。

- Joren

---

您还可以在回调函数中使用 this.element 访问元素以进行一些自定义。 - Janis