我想知道如何为fancybox添加多个标题(例如标题或链接).
我知道,如果我添加一个title =“Bla”,它将显示在框中.但是,如果我在我的图像链接中添加了类似caption =“Blabla”的内容,我需要在jquery.fancybox.js中使用哪些代码来提取该标题标记？
我知道,如果我添加一个title =“Bla”,它将显示在框中.但是,如果我在我的图像链接中添加了类似caption =“Blabla”的内容,我需要在jquery.fancybox.js中使用哪些代码来提取该标题标记？
解决方法
您不需要使用原始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脚本并使用beforeShow回调获取数据标题
$(document).ready(function() {
$('.fancybox').fancybox({
beforeShow : function(){
this.title = $(this.element).data("caption");
}
});
}); // ready
另一方面,您可能希望保留title属性并构建包含title,title和data-caption属性的fancybox标题,因此,对于此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元素(例如< div>)中获取可以包含链接或其他HTML元素的标题/标题.查看这些帖子以获取代码示例：https://stackoverflow.com/a/9611664/1055987和https://stackoverflow.com/a/8425900/1055987
注意：这适用于fancybox v2.0.6
