1

我在同一页面上有两个花式框，我想fancybox-close为其中一个设置不同的按钮样式/位置。

建议我使用wrapCSSAPI 选项，但是，我不知道如何使用它，也没有找到任何关于它如何工作的详细文档。我已经看到一些人在 stackoverflow 上谈论它，但不够详细，我无法收集如何使用它（例如，Fancybox 的多个实例的自定义样式等）。

因此我的问题是：

这是为选择器wrapCSS添加额外样式的可行途径fancybox-close吗？我该如何使用它？（对此的良好文档的参考/链接将是一个完全可以接受的答案）

还有其他可行的选择吗？

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

4

1 回答 1

2

在这种情况下，我不会使用该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

于 2013-07-29T19:18:32.977 回答