Ajax Json Data And Lightbox Conflicts

I have a gallery setup with the lightbox plugin lightGallery The gallery works perfect with static HTML. The problem arises when I dynamically grab API data and try to have the lig

Solution 1:

Call the plugin after the data is appended to the page

 function displayPhotos(data) {
    var photoData = '';
        $.each(data, function (i, photo) {
            photoData += '<a class="tile" data-src="' + photo.urls.regular + '">' + '<img alt class="photo" src="' + photo.urls.regular + '">' + '<div class="caption-box" id="' +  photo.id + '">' + '<h1 class="photo-title">' + 'Photo By: ' + photo.user.name + '</h1>' + '<p class="photo-description"> Description: Awesome photo by ' + photo.user.name + ' aka: ' + photo.user.username + ' So far this photo has ' + '<span>' + photo.likes + '</span>' + ' Likes' + '</p>' + '</div>' + '</a>';
        });
        $('#photoBox').html(photoData);
         $('#photoBox').lightGallery({
        selector: '.tile',
        download: false,
        counter: false,
        zoom: false,
        thumbnail: false,
        mode: 'lg-fade'
    });
    }