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').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…

Answer 1

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