Question

Fancybox 2中是否有方法可以获取下一个和上一个元素的标题，并在下一个和上一个按钮模板中使用这些标题，以便标题显示为链接？

这样的事情：

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

我正在使用Fancybox进行“一步一步”教程。而不是下一个/上一个箭头，我希望人们看到下一个/上一部分的标题 - 标题将是链接。

我已经阅读了js代码并且我认为它不存在，但我确信有办法获得它！

Answer 1

是的，这是可能的，但首先你需要考虑

图库中存在多少元素
图库的第一个元素的前一个title是什么（如果loop API选项设置为，那么应该是 last true（默认））

图库的 last 元素的下一个title是什么（应该是第一个，如果loop API选项设置为true）

然后在fancybox回调（afterShow）中设置验证上述条件的脚本，并将fancybox的上一个/下一个导航按钮的title属性设置为相应的值

所以试试这个：

jQuery(document).ready(function ($) { $(".fancybox").fancybox({ // loop: false, // gallery may not be cyclic afterShow: function () { // initialize some variables var gallerySize = this.group.length, next, prev; if (this.index == gallerySize - 1) { // this is the last element of the gallery so next is the first next = $(".fancybox").eq(0).attr("title"), prev = $(".fancybox").eq(this.index - 1).attr("title"); } else if (this.index == 0) { // this is the first image of the gallery so prev is the last next = $(".fancybox").eq(this.index + 1).attr("title"), prev = $(".fancybox").eq(gallerySize - 1).attr("title"); } else { // otherwise just add or substract to index next = $(".fancybox").eq(this.index + 1).attr("title"), prev = $(".fancybox").eq(this.index - 1).attr("title"); } // set title attributes to fancybox next/prev selectors $(".fancybox-next").attr("title", next); $(".fancybox-prev").attr("title", prev); } }); }); // ready

参见 JSFIDDLE

注意在我的演示中， second 元素没有title属性，因此fancybox将显示next或{{1 }} 默认情况下。此外，如果previous设置为loop，请不要担心，导航箭头不会显示第一个或最后一个元素，因此无需再做其他事情。
顺便说一下，不需要弄乱false选项。

编辑：

关于我对此的改编不太理想的一件事是它在AfterShow之后添加了链接文本。因为链接文本是相对定位的，所以这会导致fancybox显示后出现明显的延迟/调整...

不幸的是，在显示导航箭头之前，您无法设置文本/标题。 TPL回调中的相同脚本将被忽略，并显示“next”和“previous”标题。

但是，在渲染导航箭头（使用beforeShow回调）之前，您可以使用$.extend()方法修改（模板）tpl选项的默认值，例如：< / p>
beforeShow

请参阅更新的 JSFIDDLE

Fancybox：使用元素标题填充next / prev按钮

1 个答案: