Fancybox：使用元素标题填充下一个/上一个按钮

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选项设置为true（默认））
• 画廊的最后一个元素的下一个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 或previous。此外，如果loop 设置为false，请不要担心，第一个或最后一个元素不会显示导航箭头，因此无需执行任何操作。

顺便说一句，不要乱用TPL 选项。

---

编辑：

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

很遗憾，在显示导航箭头之前，您无法设置文本/标题。 beforeShow 回调中的相同脚本将被忽略，并显示“下一个”和“上一个”标题。

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

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        // loop: false, // gallery may not be cyclic 
        // preset titles before show
        beforeShow: 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);
            //
            // use extend to modify the template
            $.extend(this, {
                tpl: {
                    next: '<a title="' + next + '" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
                    prev: '<a title="' + prev + '" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
                }
            }); // extend
        }
    });
}); // ready

查看更新的JSFIDDLE