Home/ Questions/Q 6933573
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T11:50:59+00:00

Both the thumbnail tooltip and the gallery image title are ofc taken from the

  • 0

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

});

});

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0