Fancybox2 - 工具提示和图像标题的不同内容，都来自标题属性? [英] Fancybox2 - different content for tooltip and image title, both from title attribute?
问题描述
缩略图工具提示和图库图像标题均取自同一个标题 HTML 属性.
Both the thumbnail tooltip and the gallery image title are ofc taken from the same title HTML attribute.
我希望缩略图工具提示和图片标题有不同的内容.
I would like to have different content for the thumbnail tooltip and the image title.
例如，我希望工具提示说:雕塑名称，图片标题说:雕塑名称:身高123cm
eg I would like the tooltip to say: Sculpture name and the image title to say: Sculpture name: Height 123cm
有没有办法做到这一点?
Is there a way to do this?
非常感谢.
我当前的 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>
更新日期:
我目前的选择；
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
'arrows' : false,
helpers : {
buttons : {}
}
});
});
推荐答案
我要做的是将标题设置为在隐藏的 DIV 中显示在 Fancybox 中，这样我的工具提示将显示不同的内容Fancybox 中的标题:
What I would do is to set the titles to appear in Fancybox in a hidden DIV so my tooltip will show a different content from the title in Fancybox:
更新:编辑以匹配您的内容示例
UPDATE : edited to match your content sample
您的 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 标题:
NEW: (anywhere within your <body> tag) the Fancybox titles:
<div id="fancyboxTitles" style="display: none;">
<div>Sculpture1 Height: 1232mm</div>
<div>Sculpture2 Height: 1232mm</div>
</div>
注意，您的图库中的每张图片都必须有一个嵌套的 <DIV>(带有新标题).
Notice that you have to have a nested <DIV> (with the new title) for each image in your gallery.
然后，脚本:
$(document).ready(function() {
$(".fancybox").fancybox({
afterLoad : function() {
this.title = $("#fancyboxTitles div").eq(this.index).html();
}
}); //fancybox
}); // ready
更新 #2(12 月 9 日，太平洋时间 13:43):展示如何将建议的解决方案集成到原始发布的脚本中:
UPDATE #2 (Dec09, 13:43PT): Show how to integrate the proposed solution into the original posted script:
$(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
UPDATE #3 - Jun 03, 2012: For fancybox v2.0.6, use beforeShow instead of afterLoad
这篇关于Fancybox2 - 工具提示和图像标题的不同内容，都来自标题属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
