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

前端未结

关注

 1  486

慢半拍i

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 too

相关标签:

1条回答

面向向阳花

2020-11-28 00:29

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 讨论(0)