Fancybox - getting html from element based on id?

Question

I have the following snippet;

$("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()
        });
    });

But the above does not get the content from the element referenced to in the content property - what am i doing wrong?

Answer 1

the replace function needs a regular expression so try replace(/lightbox_image_/, '') and try to get the val() in stead the html()

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

Answer 2

Problem found - turns out it is not allowed to have {} in the "this.id". After removing these from the id, it worked. Thx for the answers :)