How to add jquery lightbox to content added to page via ajax?
- by laurenmichell
I am loading a gallery onto a page using the Instagram API. The AJAX looks something like this
$.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>');
}
}
});
The HTML renders something like this after the AJAX has loaded the content to the page:
<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>
I know I need to load lightbox after the dynamic content is added to the page, but can't seem to figure out how to do that. All the other advice I've tried from stackoverflow has created crazy recursiveness that has crashed my browser.
Using this jquery lightbox plugin: http://leandrovieira.com/projects/jquery/lightbox/
