Ajax JSON data conflicts and lightbox

Question

I have a gallery setup with the lightbox lightGallery plugin

Gallery works fine with static HTML. The problem arises when I dynamically capture API data and try to have the lightbox work on these elements.

I can’t get another lightbox to work with this function and correctly load the HTML block from the page (load the one that was dynamically generated). This application does the correct HTML capture if I can resolve the conflict.

Any initial thoughts? Does anyone else come across something similar?

JS:

//----------------------------------------------------------------//
//---------------// Calling Lightgallery //---------------//
//----------------------------------------------------------------//
    $('#photoBox').lightGallery({
        selector: '.tile',
        download: false,
        counter: false,
        zoom: false,
        thumbnail: false,
        mode: 'lg-fade'
    });

// ----------------------------------------------------------------//
// ---------------// Unsplash Photos //---------------//
// ----------------------------------------------------------------//

// Filter Difference based on button click
$('button').click(function () {
    $('button').removeClass("active");
    $(this).addClass("active");
    var unsplashAPI = "#URL";
    var order = $(this).text();
    var sortOptions = {
        order_by: order,
        format: "json"
    };
    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);
    }
$.getJSON(unsplashAPI, sortOptions, displayPhotos);
}); // End button

HTML:

  <div class="content" id="photoBox"></div>

- Thank

Answer 1

 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'
    });
    }