Fancybox:添加标题和其他内容 [英] Fancybox: Add Caption and other things

问题描述

我想知道如何向花哨框添加更多标题(例如标题或链接). 我知道，如果添加标题="Bla"，它将显示在框中.但是，如果我在图像链接中添加caption ="Blabla"之类的东西，我需要在jquery.fancybox.js中使用什么代码来提取该标题标签?

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?

推荐答案

您无需弄乱原始的 jquery.fancybox.js 文件，因为您可以在自己的自定义fancybox中添加此选项脚本.

You don't need to mess with original jquery.fancybox.js file since you could add this option within your own customized fancybox script.

如果您使用的是HTML5 DOCTYPE，则可以使用data-*属性作为字幕，这样您就可以使用此HTML了:

If you are using HTML5 DOCTYPE, you could use the data-* attribute for you caption so you can have this HTML :

<a class="fancybox" href="images/01.jpg" data-caption="This is the caption" >Open fancybox</a>

然后设置自定义的fancybox脚本，并使用beforeShow回调之类的

Then set your custom fancybox script and get the data-caption using the beforeShow callback like

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

这将覆盖title并改用data-caption.

另一方面，您可能想要保留title属性并构建结合了title和data-caption属性的fancybox的title，因此对于此HTML

On the other hand, you may want to keep the title attribute and build the fancybox's title combining both, title and data-caption attributes so, for this 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元素的HTML元素(例如，<div>)中获取caption/title.检查这些帖子以获取代码示例: https://stackoverflow.com/a/9611664/1055987 和https://stackoverflow.com/a/8425900/1055987

Additionally, you could also get the caption/title from 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/1055987 and https://stackoverflow.com/a/8425900/1055987

注意:适用于fancybox v2.0.6 +

NOTE : this is for fancybox v2.0.6+

这篇关于Fancybox:添加标题和其他内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！