Fancybox2 – different content for tooltip and image title, both from title attribute?

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="https://stackoverflow.com/questions/8418721/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

Leave a Comment