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属性并构建包含title和title属性的fancybox data-caption，这个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

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

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

Answer 2

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

Fancybox：添加标题和其他内容

2 个答案: