向花式框添加标题 [英] Adding a title to fancy box

问题描述

您好，您可能认为这是一个愚蠢的问题，但是我试图将标题添加到精美的方框2中.我对javascript的了解很少，但是在我的html底部有此

Hi you probably think this is a dumb question but I am trying to get titles added to fancy box 2. I know very little about javascript but have this at the bottom of my html

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

如果我尝试添加

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

我遇到各种语法错误.

站点为: http://bit.ly/Wan5kr

推荐答案

您当前的脚本是:

 $(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

...但是应该是(如果您不想拥有第1页，共6页"):

... but should be (if you don't want to have "page 1 of 6") :

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

另一方面，如果您更喜欢使用caption属性(因为当您将鼠标悬停在图像上时，title显示为 tooltip )，则将title更改为caption喜欢

On the other hand, if you prefer to use a caption attribute (because the title shows up as tooltip when you hover the images) the change title by caption like

<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>

并使用此脚本

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

这篇关于向花式框添加标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！