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

Question

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

我不确定如何正确调整css代码.我尝试按如下方式修改CSS ,但是出现了问题,"下一个"图标显示在右上角而不是"关闭"按钮.

你可以在这个要点上看到我的代码.

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文档(搜索tpl)