Как добавить лайтбокс jquery к контенту, добавленному на страницу через ajax? - PullRequest
Новая
       32

Как добавить лайтбокс jquery к контенту, добавленному на страницу через ajax?

1 голос
/ 24 марта 2012

Я загружаю галерею на страницу с помощью Instagram API. AJAX выглядит примерно так 

$.ajax ({
    type: 'GET',
    dataType: 'jsonp',
    cache: false,
    url: 'https://api.instagram.com/v1/tags/food/media/recent?client_id='+instagramCID,
    success: function(data) {
        for (i in data.data) {
            $('.instagram').append('<div class="instagram-placeholder"><a href="' + data.data[i].images.standard_resolution.url + '" title="Photo via '+ data.data[i].user.username +' on Instagram"  rel="lightbox[gallery]"><img class="instagram-image" src="' + data.data[i].images.thumbnail.url +'"/></a></div>');
        }     
    }
});

HTML-код выглядит примерно так после того, как AJAX загрузил содержимое на страницу: 

<a href="http://distilleryimage1.instagram.com/5184cfc4754211e181bd12313817987b_7.jpg"   
title="Photo via washingtonwoman on Instagram" rel="lightbox[gallery]"><img 
class="instagram-image" 
src="http://distilleryimage1.instagram.com/5184cfc4754211e181bd12313817987b_5.jpg"></a>

Я знаю, что мне нужно загрузить лайтбокс после добавления динамического контента на страницу, но не могу понять, как это сделать. Все другие советы, которые я пробовал из stackoverflow, создали сумасшедшую рекурсивность, которая выручила мой браузер.

Используя этот плагин лайтбокса jquery: http://leandrovieira.com/projects/jquery/lightbox/

1 Ответ

1 голос
/ 24 марта 2012

Работает ли что-то подобное? 

$.ajax ({
    type: 'GET',
    dataType: 'jsonp',
    cache: false,
    url: 'https://api.instagram.com/v1/tags/food/media/recent?client_id='+instagramCID,
    success: function(data) {
        for (i in data.data) {
            $('.instagram').append('<div class="instagram-placeholder"><a href="' + data.data[i].images.standard_resolution.url + '" title="Photo via '+ data.data[i].user.username +' on Instagram"  rel="lightbox[gallery]"><img class="instagram-image" src="' + data.data[i].images.thumbnail.url +'"/></a></div>');
        }     

        //Re-initialise lightboxes
        $('.instagram').lightBox();
    }
});

Вам нужно будет передать той же конфигурации функции lightBox (), что и при первоначальной настройке лайтбокса при загрузке страницы.

По сути, здесь происходит то, что мы заставляем лайтбокс заново инициализироваться после загрузки контента ajax.

Вышеуказанное должно быть самым простым решением, учитывая код, который я видел.

Если вы хотите поэкспериментировать с событиями ajax, вы можете вместо этого попробовать связать событие ajax , но это немного выходит за рамки этого вопроса.

...