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').fancybox({

        beforeShow : function() {
            this.title = '<div class="new-title-title">' + $(this).attr('title') + '</div><div class="new-title-alt">' +  $(this).children('img:first').attr('alt') + '</div>';
        },

        helpers : {
            title: {
                type: 'inner',
                beforeShow: function(opts) {
                    console.log('beforeShow title helper');
                },
            },
        },

    });

Titles from $(this).attr('title') work, Captions from $(this).children('img:first').attr('alt') say undefined... I know I must be missing something simple...

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').fancybox({

        beforeShow : function() {
            this.title = '<div class="new-title-title">' + $(this).attr('title') + '</div><div class="new-title-alt">' +  $(this).children('img:first').attr('alt') + '</div>';
        },

        helpers : {
            title: {
                type: 'inner',
                beforeShow: function(opts) {
                    console.log('beforeShow title helper');
                },
            },
        },

    });

Titles from $(this).attr('title') work, Captions from $(this).children('img:first').attr('alt') say undefined... I know I must be missing something simple...

• javascript
• jquery
• fancybox

4 Answers 4

If I understood right, you want fancybox title as a bination 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

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

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>

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 }}"