Lightbox that works with dynamically loaded html

Question

I'm currently using a read more function on the frontpage of my site to load in larger sections of articles. It loads from a seperate html file a div with the id mainarticle. It makes use of the jQuery function .load() but the lightbox within this section does not work.

I know it is something to do with .live() but I am unable to pinpoint the function that I need to change to a live() function.

I'm currently using jQuery lightbox; does anyone know of an existing lightbox that works with loaded in content, or how I can modify one to work?

Thanks.

Answer 1

What live does, is attach events to elements that exist on page or will appear on page.

You probably have lightbox open bound to some elements click event. change that code from

$('element').bind('click', function(event){
  open lightbox here
});

to

$('element').live('click', function(event){
  open lightbox here
});

and you are done.

Answer 2

Got it!

The answer is use this - http://www.gettopup.com/ !