jquery - 如何在 Fancybox 2.1.5 中用自定义按钮替换默认控件？

Question

在 Fancybox 2.1.5 中，我想用我的自定义按钮替换默认控件（精灵上的新预加载器 + 关闭/下一个/上一个按钮）。

我不确定如何正确调整 CSS 代码。我尝试按如下方式修改 CSS ，但出现了问题，右上角显示了“下一步”图标而不是“关闭”按钮。

你可以在这个 gist上看到我的代码。

Answer 1

无需弄乱原始 CSS 文件，使用tplAPI 选项代替

$(".fancybox").fancybox({
    tpl: {
        closeBtn: '<a title="Close" class="fancybox-item fancybox-close myClose" href="javascript:;"></a>'
    }
});

请注意，我添加了该类myClose，因此我可以设置它自己的特定 CSS 属性、背景图像等，例如

.myClose {
    height: 50px;
    width: 50px;
    background: #ff0000;
}

请参阅JSFIDDLE作为示例。

对上一个/下一个图标执行相同的操作。查看API 文档（搜索 tpl）