Question

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

建议我使用wrapCSS API选项，但是，我不知道如何使用它，我还没有找到任何有关它如何工作的详细文档。我已经看到有一些人在stackoverflow上谈论它，但是我没有详细说明如何使用它（例如Custom styles for multiple instances of 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类，告诉我fancybox 关闭按钮将位于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

在同一页面上设置两个fancybox-close实例的样式，并可能使用wrapCSS属性

1 个答案: