jquery - Fancybox:添加标题和其他内容

Question

我想知道如何向 fancybox 添加标题以外的内容(例如标题或链接)。我知道如果我添加 title="Bla"它会显示在框中。但是，如果我在图像链接中添加类似 Caption="Blabla"的内容，我需要在 jquery.fancybox.js 中添加哪些代码来提取该标题标签？

Answer 1

您不需要弄乱原始的 jquery.fancybox.js 文件，因为您可以在自己的自定义 fancybox 脚本中添加此选项。

如果您使用HTML5 DOCTYPE ，您可以使用data-*属性为您的标题，这样您就可以拥有以下 HTML :

<a class="fancybox" href="images/01.jpg" data-caption="This is the caption" >Open fancybox</a>

然后设置您的自定义 fancybox 脚本并获取 data-caption使用beforeShow回调就像

$(document).ready(function() {
 $('.fancybox').fancybox({
  beforeShow : function(){
   this.title =  $(this.element).data("caption");
  }
 });
}); // ready

这将覆盖 title并使用 data-caption相反。

另一方面，您可能希望保留 title属性并构建 fancybox 的 title将两者结合起来，title和data-caption属性so，对于这个HTML

<a class="fancybox" href="images/01.jpg" title="This is the title" data-caption="This is the caption">Open fancybox</a>

使用此脚本

$(document).ready(function() {
 $('.fancybox').fancybox({
  beforeShow : function(){
   this.title =  this.title + " - " + $(this.element).data("caption");
  }
 });
}); // ready

此外，您还可以获得 caption/title来自文档中的另一个 HTML 元素(例如 <div>)，该元素可以包含链接或其他 HTML 元素。检查这些帖子的代码示例:https://stackoverflow.com/a/9611664/1055987和 https://stackoverflow.com/a/8425900/1055987

注意:这适用于 fancybox v2.0.6+