Fancybox：添加标题和其他内容

我想知道如何添加一个标题（例如标题或链接）到fancybox。 我知道，如果我添加一个title =“Bla”，它将显示在框中。 但是，如果我在我的图像链接中添加了类似caption =“Blabla”的内容，我需要在jquery.fancybox.js中使用哪些代码来提取该标题标记？

Answer 1

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

如果您使用的是HTML5 DOCTYPE ，则可以使用data-*属性作为标题，这样您就可以拥有此HTML：

 Open fancybox 

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

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

这将覆盖title并改为使用data-caption 。

另一方面，您可能希望保留title属性并构建包含title ， title和data-caption属性的fancybox title ，因此，对于此HTML

 Open fancybox 

使用此脚本

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

此外，您还可以从文档中的另一个HTML元素（例如

）获取caption/title ，该元素可以包含链接或其他HTML元素。 查看这些post以获取代码示例： https ： //stackoverflow.com/a/9611664/1055987和https://stackoverflow.com/a/8425900/1055987

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

Answer 2

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