3

嗨，您可能认为这是一个愚蠢的问题，但我正在尝试将标题添加到花哨的框 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

4

2 回答 2

7

您当前的脚本是：

 $(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 页”）：

 $(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
于 2012-11-02T19:01:20.887 回答
0

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

就像：

<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'
});

除了“over”，您还可以将其放置在“inside”或“outside”。外部是默认的花式框行为。它将您的标题定位在灯箱的正下方（外部）。'Over' 将标题放在灯箱内，但在带有深色 Alpha 透明背景的图片顶部。'Inside' 将您的标题放在灯箱内，但在图片下方，在白色灯箱边框中。

您可以在fancybox.net的首页看到不同的结果。请参阅下面的三张图片：“不同的标题位置 - 'outside'、'inside'和'over' ”

于 2012-11-01T12:46:35.197 回答