How to add jquery lightbox to content added to page via ajax?
Posted
by
laurenmichell
on Stack Overflow
See other posts from Stack Overflow
or by laurenmichell
Published on 2012-03-24T05:25:58Z
Indexed on
2012/03/24
5:29 UTC
Read the original article
Hit count: 197
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/
© Stack Overflow or respective owner
