Fancybox2 - 来自标题属性的工具提示和图像标题的不同内容? [英] Fancybox2 - different content for tooltip and image title, both from title attribute?
问题描述
缩略图工具提示和图库图片标题都取自同一个标题 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 高度:1232mm" href="images/Sculpture2_large_res.jpg"><imagetag alt="Sculpture2 高度:1232mm" src="images/thumbs/Sculpture2_thumb.jpg" class="thumb"></a>
日期:
我目前的选择;
$(document).ready(function() {$(".fancybox").fancybox({openEffect : '弹性',closeEffect : '弹性','箭头':假,帮手:{纽扣 : {}}});
});
我要做的是将标题设置为在隐藏的 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 高度:1232mm" src="images/thumbs/Sculpture2_thumb.jpg" class="thumb"></a>
注意 title
属性值.
新:(<body>
标签内的任何地方)Fancybox 标题:
注意,您必须为图库中的每张图片嵌套一个<DIV>
(带有新标题).
然后,脚本:
$(document).ready(function() {$(".fancybox").fancybox({加载后:函数(){this.title = $("#fancyboxTitles div").eq(this.index).html();}});//花式盒子});//准备好
更新 #2(太平洋时间 12 月 9 日,13:43):展示如何将提议的解决方案集成到原始发布的脚本中:
$(document).ready(function() {$(".fancybox").fancybox({openEffect : '弹性',closeEffect : '弹性',箭头:假,帮手:{纽扣 : {}},//帮手加载后:函数(){this.title = $("#fancyboxTitles div").eq(this.index).html();}//后加载});//花式盒子});//准备好
更新 #3 - 2012 年 6 月 3 日:对于fancybox v2.0.6,使用 beforeShow
而不是 afterLoad
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.
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?
Many thanks.
My current 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:
My current options;
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
'arrows' : false,
helpers : {
buttons : {}
}
});
});
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
Your 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>
Notice the title
attribute values.
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>
Notice that you have to have a nested <DIV>
(with the new title) for each image in your gallery.
Then, the script:
$(document).ready(function() {
$(".fancybox").fancybox({
afterLoad : function() {
this.title = $("#fancyboxTitles div").eq(this.index).html();
}
}); //fancybox
}); // ready
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
UPDATE #3 - Jun 03, 2012: For fancybox v2.0.6, use beforeShow
instead of afterLoad
这篇关于Fancybox2 - 来自标题属性的工具提示和图像标题的不同内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!