AJAX loaded content with lightbox2

Question

I'm using the Lightbox2 script and the content of my page is loaded via an AJAX request.
I don't find any function to attach new images or initialize Lightbox2 after an AJAX request, How can I make that in order to use Lightbox2 for images loaded via AJAX ?

Léo

Answer 1

I had to reinitialize lightbox in order to detect new images. I have done that like this:

window.lightbox.init();

I placed this code in my success handler of ajax call after I have added the new content:

contentContainer.empty().html(data);

Answer 2

From the documentation files: http://lokeshdhakar.com/projects/lightbox2/ You do not need to initiate anything, any image link with the data-lightbox attribute like this:

<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

will work automagically even if loaded by AJAX as soon as you add it to your DOM.

EDIT: After having taken a look at the lightbox script, you may have to change as well the line #51:

$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {

into this:

$('body').live('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {