Search code examples
javascriptajaxlightbox2

AJAX loaded content with lightbox2

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

Solution

  • 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) {