Question

缩略图工具提示和图库图片标题都取自同一标题HTML属性。

我想为缩略图工具提示和图片标题提供不同的内容。

例如，我希望工具提示说：Sculpture name和图片标题：Sculpture name: Height 123cm

有办法做到这一点吗？

非常感谢。

我目前的HTML：

<a class="fancybox" rel="works" title="Sculpture1 Height:1232mm"     href="images/Sculpture1_large_res.jpg"><imagetag alt="Sculpture1 Height:1232mm" src="images/thumbs/Sculpture1_thumb.jpg" class="thumb"></a>  

<a class="fancybox" rel="works" title="Sculpture2 Height:1232mm" href="images/Sculpture2_large_res.jpg"><imagetag alt="Sculpture2 Height:1232mm" src="images/thumbs/Sculpture2_thumb.jpg" class="thumb"></a>

UDATE：

我目前的选择;

$(document).ready(function() {

$(".fancybox").fancybox({
    openEffect  : 'elastic',
    closeEffect : 'elastic',
    'arrows' :    false,
        helpers     : { 
        buttons : {}
    }

});

}）;

Answer 1

我要做的是将标题设置为隐藏DIV中的Fancybox，这样我的工具提示将显示与Fancybox中标题不同的内容：

更新：已修改以匹配您的内容示例

您的HTML：

<a class="fancybox" rel="works" title="Sculpture1" href="images/Sculpture1_large_res.jpg"><img alt="Sculpture1 Height:1232mm" src="images/thumbs/Sculpture1_thumb.jpg" class="thumb"></a>  
<a class="fancybox" rel="works" title="Sculpture2" href="images/Sculpture2_large_res.jpg"><img alt="Sculpture2 Height:1232mm" src="images/thumbs/Sculpture2_thumb.jpg" class="thumb"></a>

请注意title属性值。

新 :( <body>标记内的任何地方）Fancybox标题：

<div id="fancyboxTitles" style="display: none;">
    <div>Sculpture1 Height: 1232mm</div>
    <div>Sculpture2 Height: 1232mm</div>
</div>

注意您必须为图库中的每个图片添加嵌套<DIV>（带有新标题）。

然后，脚本：

$(document).ready(function() {
 $(".fancybox").fancybox({
  afterLoad : function() {
   this.title = $("#fancyboxTitles div").eq(this.index).html();
  }
 }); //fancybox
}); // ready

UPDATE＃2（Dec09,13：43PT）：展示如何将建议的解决方案集成到原始发布的脚本中：

$(document).ready(function() {
    $(".fancybox").fancybox({
            openEffect  : 'elastic',
            closeEffect : 'elastic',
            arrows :    false,
            helpers : { 
                    buttons : {}
            }, // helpers
            afterLoad : function() {
                this.title = $("#fancyboxTitles div").eq(this.index).html();
            } // afterload
    }); // fancybox
}); // ready

更新＃3 - 2012年6月3日：对于fancybox v2.0.6，请使用beforeShow代替afterLoad

Fancybox2 - 工具提示和图片标题的不同内容，都来自title属性？

1 个答案: