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

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>'
}

tpl：{
下一步：''，
上一页：“”
}

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

---

我已经通读了js代码，我不认为它在那里，但我相信有一种方法可以得到它

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

• 库中有多少个元素
• 库的第一个元素的上一个

  标题是什么（如果
  loop
  API选项设置为
  true
  （默认值），则应该是最后一个元素）

• 库的最后一个元素的下一个

  标题是什么（如果
  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

看

注意在我的演示中，第二个元素没有

title

属性，因此默认情况下，fancybox将显示

next

或

previous

。此外，如果

loop

设置为

false

，则导航箭头不会显示第一个或最后一个元素，因此无需进一步操作

顺便说一句，你不需要乱用

TPL

选项

---

编辑：

---

我对这部电影的改编有一点不太理想，那就是它增加了一个链接。由于链接文本是相对定位的，这会导致fancybox出现后显示明显延迟/调整。。。 不幸的是，在显示导航箭头之前，无法设置文本/标题。

beforeShow

回调中的相同脚本将被忽略，并显示“下一个”和“上一个”标题

但是，您可以使用

$.extend（）

方法在呈现导航箭头之前（使用

beforeShow

回调）修改（模板）

tpl

选项的默认值，如下所示：

jQuery（文档）.ready（函数（$）{
$（“.fancybox”）.fancybox({
//循环：false，//库可能不是循环的
//放映前预设标题
beforeShow:函数（）{
//初始化一些变量
var gallerySize=this.group.length，
下一步，上一步；
if（this.index==gallerySize-1）{
//这是画廊的最后一个元素，所以下一个是第一个元素
next=$（“.fancybox”）.eq（0）.attr（“标题”），
prev=$（“.fancybox”）.eq（this.index-1）.attr（“title”）；
}else if（this.index==0）{
//这是画廊的第一张图片，所以prev是最后一张
next=$（“.fancybox”）.eq（this.index+1.attr（“title”），
prev=$（“.fancybox”）.eq（gallerySize-1）.attr（“标题”）；
}否则{
//否则，只需在索引中添加或减去
next=$（“.fancybox”）.eq（this.index+1.attr（“title”），
prev=$（“.fancybox”）.eq（this.index-1）.attr（“title”）；
}
//将标题属性设置为fancybox下一个/上一个选择器
//$（“.fancybox next”）.attr（“title”，next）；
//美元（“.fancybox prev”）.attr（“标题”，prev）；
//
//使用“扩展”修改模板
$。扩展（此{
第三方物流：{
下一步：''，
上一页：“”
}
})；//扩展
}
});
}); // 准备好的

---

请参见更新的

JFK，非常感谢。我一直在想我需要破解fancybox脚本本身，但它显然输出了足够的标记，可以由第二个脚本在外部修改，如您在这里所示。顺便说一句，我决定使用您的脚本来更改“next”/“prev”文本本身，而不是title attr，因此我将您的最后两行更改为

$（“.fancybox next”）.text（next）$（“.fancybox prev”）。文本（prev）-以防可能对其他人有所帮助。我对这篇文章的改编有一点不太理想，那就是它添加了链接文本。由于链接文本是相对定位的，这会导致fancybox显示后出现明显的延迟/调整，如图所示。我正在阅读代码，试图了解是否有办法在显示fancybox之前添加文本。
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