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

问题

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 : {}
    }

});

});

回答1:

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

来源：https://stackoverflow.com/questions/8418721/fancybox2-different-content-for-tooltip-and-image-title-both-from-title-attri

标签

jquery

attributes

fancybox

title