将标题添加到花式框中

Ama*_*nda 3 jquery fancybox fancybox-2

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

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>
Run Code Online (Sandbox Code Playgroud)

如果我尝试加入

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

我得到各种语法错误.

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

JFK*_*JFK 5

您当前的脚本是:

 $(document).ready(function() {
  $(".fancybox").fancybox({
   helpers : { 
    title : { type : 'inside' }
   }, // helpers
   afterLoad : function() {
    this.title = (this.title ? '' + this.title + '<br />' : '') + 'Image ' + (this.index + 1) + ' of ' + this.group.length;
   } // afterLoad
  }); // fancybox
 }); // ready
Run Code Online (Sandbox Code Playgroud)

......但应该是(如果你不想要"第1页,共6页"):

 $(document).ready(function() {
  $(".fancybox").fancybox({
   helpers : { 
    title : { type : 'inside' }
   } // helpers
  }); // fancybox
 }); // ready
Run Code Online (Sandbox Code Playgroud)

在另一方面,如果你喜欢使用caption属性(因为title显示为工具提示,当你停在图片)的变化titlecaption类似

<a href="images/Gallery/large/wing-back-chair.jpg" caption="Early 1900'....." rel="Sold" class="fancybox"><img width="304" height="350" alt="Winged back chair and ottoman" src="images/Gallery/tn/wing-back-chair.jpg"></a>
Run Code Online (Sandbox Code Playgroud)

并使用此脚本

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