Fancybox:添加标题和其他内容

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属性并构建fancybox的title组合,title以及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

此外,您还可以caption/title从文档中的另一个HTML元素(<div>例如)获取可以包含链接或其他HTML元素的HTML元素.查看这些帖子以获取代码示例:https://stackoverflow.com/a/9611664/1055987和/sf/answers/589813031/

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

Answer 2

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