添加标题看中箱(Adding a title to fancy box)

嗨，你可能认为这是一个愚蠢的问题，但我想获得冠军加入花哨的箱2。我不是很了解JavaScript，但有这个在我的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

Answer 1:

您当前的脚本是：

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

......但应该是（如果你不希望有“页面的6 + 1”）：

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

在另一方面，如果你喜欢使用caption属性（因为title显示为工具提示 ，当你停在图片）的变化title的caption一样

<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

Answer 2:

一个（简单的）选项是设置父HREF的丝毫不差属性。

就像：

<a href="./bigimg/image.jpg" title="My custom title here" id="example">
    <img src="./thumbs/image.jpg" alt="thumbnail of image">
</a>

如果你想放置灯箱，而不是正下方这里面的标题，你需要改变“titlePostion”属性。 像这样：

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

而不是“过”你也可以将它放在“内部”或“外部”。 外面是默认的fancybox行为。 它正下方（外）灯箱位置您的标题。 “在”放在标题中的收藏夹内，但在一个黑暗的阿尔法透明背景的图片之上。 “里面”的地方你的标题灯箱内，但下面的图片中，在白色灯箱边框。

你可以看到的FrontPage中不同的结果fancybox.net 。 看到三个图片下：“ 不同的标题位置- ‘外部’，‘内部’和‘过度’”

文章来源: Adding a title to fancy box