jQuery Fancybox：添加标题和其他内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12352927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fancybox: Add Caption and other things
提问by Jean
I'd like to know how I can add more than a title (e.g a caption or a link) to the fancybox. I am aware that if I add a title="Bla" it'll show up in the box. But if I add something like caption="Blabla" to my image link, what code do I need to have in jquery.fancybox.js to pull that caption tag?
我想知道如何向fancybox 添加多个标题（例如标题或链接）。我知道如果我添加一个 title="Bla" 它会显示在框中。但是，如果我在图像链接中添加了诸如 caption="Blabla" 之类的内容，我需要在 jquery.fancybox.js 中使用什么代码来提取该标题标签？
回答by JFK
You don't need to mess with original jquery.fancybox.jsfile since you could add this option within your own customized fancybox script.
你不需要弄乱原始的jquery.fancybox.js文件，因为你可以在你自己定制的fancybox脚本中添加这个选项。
If you are using HTML5 DOCTYPE, you could use the data-*attribute for you caption so you can have this HTML :
如果您正在使用HTML5 DOCTYPE，则可data-*以为您的标题使用该属性，以便您可以拥有以下 HTML：
<a class="fancybox" href="images/01.jpg" data-caption="This is the caption" >Open fancybox</a>
Then set your custom fancybox script and get the data-captionusing the beforeShowcallback like
然后设置您的自定义fancybox脚本并data-caption使用beforeShow回调获取
$(document).ready(function() {
$('.fancybox').fancybox({
beforeShow : function(){
this.title = $(this.element).data("caption");
}
});
}); // ready
That will override the titleand use the data-captioninstead.
这将覆盖title并使用data-caption代替。
On the other hand, you may want to keep the titleattribute and build the fancybox's titlecombining both, titleand data-captionattributes so, for this HTML
另一方面，对于此 HTML ，您可能希望保留title属性并构建fancybox 的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>
Use this script
使用这个脚本
$(document).ready(function() {
$('.fancybox').fancybox({
beforeShow : function(){
this.title = this.title + " - " + $(this.element).data("caption");
}
});
}); // ready
Additionally, you could also get the caption/titlefrom another HTML element within your document (a <div>for instance) that can have links or other HTML elements. Check these posts for code examples: https://stackoverflow.com/a/9611664/1055987and https://stackoverflow.com/a/8425900/1055987
此外，您还可以caption/title从文档中的另一个 HTML 元素（<div>例如）获取链接或其他 HTML 元素。检查这些帖子以获取代码示例：https: //stackoverflow.com/a/9611664/1055987和https://stackoverflow.com/a/8425900/1055987
NOTE: this is for fancybox v2.0.6+
注意：这是用于fancybox v2.0.6+
回答by Brad Adams
Old question, but thanks to JFK's answer I found out that with the latest version of fancyboxyou can add a caption simply by entering a value in the title=""attribute (by default). Just make sure it's included on the <a>element with the fancyboxclass.
老问题，但感谢 JFK 的回答，我发现在最新版本中，fancybox您只需在title=""属性中输入一个值（默认情况下）即可添加标题。只要确保它包含在类的<a>元素中fancybox。
