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

Question

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

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

您可以在this gist上看到我的代码。

Answer 1

无需使用原始CSS文件，请使用tpl API选项，而不是

$(".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 作为示例。

对prev / next图标执行相同操作。查看API documentation (search for tpl)