javascript - AJAX loaded content with lightbox2 - Stack Overflow

admin管理员组

文章数量:1290938

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

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

• javascript
• ajax
• lightbox2

Share Improve this question Follow asked Jul 20, 2014 at 9:40 leoswleosw 10511 gold badge22 silver badges66 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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);

From the documentation files: http://lokeshdhakar./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) {

本文标签： javascriptAJAX loaded content with lightbox2Stack Overflow