Fancybox: Get id of clicked anchor/element

Question

I am trying to get the id of the clicked/shown element in fancybox. I have tried both "this.id" and "this.attr("id")" - but none of them works.

$("a.lightbox_image").fancybox({
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 600,
            'speedOut': 200,
            'content': 'Id of element clicked'+this.attr("id")
 });

Any suggestions?

Answer 1

You can do it like this:

$("a.lightbox_image").each(function() {
  $(this).fancybox({
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 600,
        'speedOut': 200,
        'content': 'Id of element clicked' + this.id
  });
});

this refers probably to window where you're binding currently (or document if in the ready event, can't be sure without seeing more code). For this to be the <a> like you want, you should use a .each() loop and assign it there...inside the .each() closure, this refers to the anchor.

Answer 2

I tried to implement the above in the following;

$("a.lightbox_image").each(function () {
            $(this).fancybox({
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'speedIn': 600,
                'speedOut': 200,
                'content': $('#lightbox_image_content_'+this.id.replace('lightbox_image_','')).html()
            });
        });

I know the this.id function works, but the above code does not work - it does not show the html from the specified id?