Fancybox 2 Custom Titles and Captions [from A(title) and IMG(alt]

Question

I\'m trying to use title and \"captions\" from image alt tags with fancybox 2... for some reason I can\'t seem this to work...

    $(\'.fancybox\').fancybo         


        

Answer 1

I had a similar issue and ended up using a separate title tag for the thumbnail image. seems to work too, though not as dynamic.

<a class="fancybox-print" data-fancybox-type="iframe"  title="Banking On Fun<p>Bank of America</p><br /><h3>For Bank of America we created print and in-store POP that told how home loans could turn dreams into reality.</h3>"href="template-print01.html"><img class="print" src="images/print.jpg" title="PRINT" alt=""/></a>

Answer 2

If you use Fancybox with Angular ng-repeat you can do something like this, then it also works on text and you don't need an img tag or the img alt tag.

title="<b>{{banner.fancyboxTitle}}</b><br>{{ banner.fancyboxParagraph }}"

Answer 3

If I understood right, you want fancybox title as a combination of the title attribute in the a tag + the alt attribute in the img tag.

If the above is correct, then having a html like

<a class="fancybox" href="images/01.jpg" title="title anchor 01" ><img src="images/01t.jpg" alt="alt image 01" /></a>

the fancybox title should say "title anchor 01 alt image 01"

you do that with this script:

$(document).ready(function() {
 $(".fancybox").fancybox({
  helpers : {
   title: { type: 'inside'}
  },
  afterLoad: function(){
   this.title = this.title + ' ' + $(this.element).find('img').attr('alt');
  }
 }); // fancybox
}); // ready

Answer 4

fiddling with debugger I found out this works:

beforeShow : function() {
    var alt = this.element.children[0].alt;
    this.title = '<div class="new-title-title">' + alt + '</div>';
},

It is not the most elegant way, but it does what you (and I) want - get the ALT-value from the image.

Regards, Paul