添加标题到花式框

嗨，你可能认为这是一个愚蠢的问题，但我正在尝试将标题添加到花哨的方框2.我对javascript知之甚少，但在我的html底部有这个

 $(document).ready(function() { $(".fancybox").fancybox(); });  

如果我尝试加入

 $(".fancybox") .attr('rel', 'gallery') .fancybox({ beforeLoad: function() { this.title = $(this.element).attr('caption'); } }); 

我得到各种语法错误。

网站是： http ： //bit.ly/Wan5kr

Answer 1

您当前的脚本是：

  $(document).ready(function() { $(".fancybox").fancybox({ helpers : { title : { type : 'inside' } }, // helpers afterLoad : function() { this.title = (this.title ? '' + this.title + '
' : '') + 'Image ' + (this.index + 1) + ' of ' + this.group.length; } // afterLoad }); // fancybox }); // ready 

……但应该是（如果你不想要“第1页，共6页”）：

  $(document).ready(function() { $(".fancybox").fancybox({ helpers : { title : { type : 'inside' } } // helpers }); // fancybox }); // ready 

另一方面，如果您更喜欢使用caption属性（因为当您hover图像时title显示为工具提示 ）更改title ，如caption所示

并使用此脚本

  $(document).ready(function() { $(".fancybox").fancybox({ helpers : { title : { type : 'inside' } }, // helpers beforeLoad: function() { this.title = $(this.element).attr('caption'); } }); // fancybox }); // ready 

Answer 2

一个（也是最简单的）选项是设置父href的tittle属性。

就像：

如果要将标题放在灯箱内而不是右下方，则需要更改“titlePostion”属性。 像这样：

 $("a.fancybox").fancybox({ 'titlePosition' : 'inside' }); 

而不是’结束’，你也可以把它放在’内部’或’外部’。 Outside是默认的fancybox行为。 它将您的标题定位在灯箱的正下方（外部）。 “Over”将标题置于灯箱内，但在图片顶部放置一个深色Alpha透明背景。 “内部”将您的标题放在灯箱内，但在图片下方，白色灯箱边框中。

您可以在fancybox.net的首页上看到不同的结果。 看下面的三张图片：“ 不同的标题位置 – ‘外部’，’内部’和’结束’ ”