文章/答案/技术大牛

发布

社区首页 >问答首页 >Fancybox2 -工具提示和图像标题的内容不同，都来自标题属性？

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

Stack Overflow用户

提问于 2011-12-08 00:23:45

回答 1查看 6.4K关注 0票数 2

缩略图工具提示和图库图像标题都取自相同的title 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 : {}
    }

});

})；

fancybox

title

jquery

attributes

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-12-08 11:46:41

我要做的是将标题设置为以隐藏的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

更新#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

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8418721

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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