2

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

});

});

aVo
  • 23
  • 1
  • 4

1 Answers1

4

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

JFK
  • 40,963
  • 31
  • 133
  • 306
  • Hi @JFK,but I haven't yet got this to work. Please would you clarify? I have posted my current HTML (different to yours) as an edit to my original post. What do I do with the hidden div, exactly, please? Thanks. – aVo Dec 08 '11 at 13:57
  • @aVo The hidden DIV contains another set of DIVs, ONE per image in your gallery. Each nested DIV will have the title you want display with your images in fancybox. I edited my answer to match your post. – JFK Dec 08 '11 at 18:10
  • Thanks for taking the time @JFK. That's brilliant! Works. Now all I need is to integrate your javascript into my existing options. I have added my current document.ready into my original post. Please would you show me how to do this. I did try! :) – aVo Dec 09 '11 at 10:55
  • @aVo : see my edited answer (last update) ... and don't forget to check if this is the right (best) answer to your question. – JFK Dec 09 '11 at 21:48
  • @ JFK yes, fantastic, that's got it. What a difference a comma makes :D Your answer works very well for me. My thanks again. – aVo Dec 12 '11 at 18:40
  • So don't forget to select this as the right answer to your question – JFK Dec 12 '11 at 18:47
  • Ok, I see. That's the tick sign? I've checked it. I wondered if you were referring to a specific check but couldn't see what you meant initially. Please do let me know if that is still not what you mean. Thanks again for your help! – aVo Dec 13 '11 at 08:12