Question

是否可以通过链接更改Fancybox中的上一个和下一个按钮？

此代码有效，因为它是默认按钮上一个按钮：

<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>

我尝试用文字替换标签，但它不起作用

<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;">NEXT</a>

但没有奏效:(

你有解决方案吗？

非常感谢您的回答

Answer 1

您可以使用tpl API选项设置文字，如：

$(".fancybox").fancybox({
    tpl: {
        next: '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span>NEXT</span></a>',
        prev: '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span>PREVIOUS</span></a>'
    }
});

和一些css删除默认导航按钮（并设置文本样式），如：

.fancybox-nav span {
    background: 0 none !important;
    color: #fff;
    font-weight: bold
}

参见 JSFIDDLE

Answer 2

由于这样的简单更改，默认链接无法正常工作。

以下是您可以尝试的一些事项：

查看控制台，看看是否有一些JS错误会导致执行失败，从而阻止上一个/下一个行为。
确保代码中每个方向只有一个按钮（我不太熟悉FancyBox的内部工作方式，但可能只选择了第一个按钮）。
如果其他一切都失败了，您可以使用提供的Fancybox公共方法添加您自己的上一个/下一个功能： $ .fancybox.next ， $ .fancybox.prev （{ {3}}）

这些方面的东西：

var $fancyBoxedEl = $("#gallery").fancybox();

$('a.prev').click(function(){
    $fancyBoxedEl.prev();
    return false;
})

希望这一点。

Fancybox：如何通过链接更改上一个/下一个按钮

2 个答案: