16

我想知道我怎样才能在fancybox 中添加更多的标题（例如标题或链接）。我知道如果我添加一个 title="Bla" 它会出现在框中。但是，如果我在我的图片链接中添加类似 caption="Blabla" 的内容，我需要在 jquery.fancybox.js 中拥有什么代码来拉取该标题标签？

4

2 回答 2

36

你不需要弄乱原始的 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并使用 the data-caption。

另一方面，对于这个 HTML ，您可能希望保留title属性并构建幻想框的title组合title和属性data-caption

<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+

于 2012-09-10T18:29:05.933 回答
10

老问题，但感谢 JFK 的回答，我发现使用最新版本的fancybox您只需在title=""属性中输入一个值即可添加标题（默认情况下）。只要确保它包含在类的<a>元素中fancybox。

于 2014-11-19T22:23:22.983 回答