如何將jQuery Lightbox添加到通過ajax添加到頁面的內容中？

Question

我正在使用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>');
        }     
    }
});

在AJAX將內容加載到頁面后，HTML呈現如下所示：

<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/

Answer 1

這樣的事情行嗎？

$.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事件 ，但這超出了此問題的范圍。