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
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
