可以使用wrapCSS属性在同一页面上设置两个fancybox实例的样式

Question

我在同一页上有两个扇形框，我希望其中一个的fancybox-close按钮有不同的样式/位置。

建议我使用wrapCSS API选项，但我不知道如何使用它，也没有找到任何关于它如何工作的详细文档。我在stackoverflow上看到一些人在谈论它，但没有足够的细节让我了解如何使用它（例如，Fancybox的多个实例的自定义样式等）。

因此，我的问题是：

wrapCSS选项是否是向fancybox-close选择器添加附加样式的可行途径？我该如何使用它？

还有其他可行的选择吗？

如果适用，我希望看到一些代码示例。

Answer 1

在这种情况下，我不会使用wrapCSS选项，而是在我想要的不同风格的元素中添加一个额外的类，即

<a class="fancybox" rel="gallery" href="http://fancyapps.com/fancybox/demo/1_b.jpg">Fancybox-close button is on the right</a>
<a class="fancybox closeLeft" rel="gallery" href="http://fancyapps.com/fancybox/demo/2_b.jpg">Fancybox-close button is on the left</a>

请注意第二个链接具有类closeLeft，这告诉我扇盒关闭按钮将位于left上，而不是默认位置（right）上

然后，我将使用afterShow回调来验证类，并相应地更改样式：

$(".fancybox").fancybox({
    afterShow: function () {
        if ($(this.element).is(".closeLeft")) {
            // change styles for this element
            $(".fancybox-close").css({
                left: -18,
                right: "auto"
            });
        }
    }
});

请参阅JSFIDDLE