activate lightbox on dynamically added content

Question

I\'m developing a little portfolio where I can choose a category and when I click it, the content (thumbnails) of that category will be shown (this is via an array).

Answer 1

You can call many jQuery lightboxes with $.lightboxName(), e.g.

$('a[rel=lightbox]').live('click', function(e){
  e.preventDefault;
  $.fancybox({ href : $(this).attr('href') });
  // OR $.colorbox({ href : $(this).attr('href') });
});

Note that jQuery now recommends using .on() instead of .live().

Answer 2

If you are binding the links with a regular event handler:

$('a[rel=lightbox]').click(function(e){ ... });

Then any new content that is added after the bind won't be captured.

You can either rerun the bind when you change out the content, or more simply use jQuery's event delegation to attach the handler:

$('a[rel=lightbox]').live('click', function(e){ ... });