Javascript Ajax JSON数据和lightbox冲突

我有一个画廊设置与灯箱插件

该图库与静态HTML完美结合。当我动态获取API数据并尝试让lightbox处理这些项目时，问题就出现了

我似乎无法让另一个lightbox同时使用此函数和从页面正确加载HTML块（加载动态生成的块）。如果我能解决冲突，这个应用程序会进行正确的HTML抓取

有什么初步想法吗？还有谁遇到过类似的事情吗

JS:

//----------------------------------------------------------------//
//---------------//呼叫Lightgallery//---------------//
//----------------------------------------------------------------//
$（#photoBox'）。lightGallery({
选择器：'.tile'，
下载：错，
柜台：错，
zoom:错，
缩略图：错，
模式：“lg淡入淡出”
});
// ----------------------------------------------------------------//
//----------------//未刷新的照片//---------------//
// ----------------------------------------------------------------//
//基于按钮点击过滤差异
$（“按钮”）。单击（函数（）{
$（“按钮”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
var unsplashAPI=“#URL”；
var order=$（this.text（）；
变量排序={
订货人：订单，
格式：“json”
};
功能显示照片（数据）{
var-photoData=''；
$。每个（数据、功能（i、照片）{
photoData+='+'+'+'+'+''照片作者：'+Photo.user.name++'
描述：真棒的照片作者'+Photo.user.name++'又名：'+Photo.user.username++'到目前为止，这张照片有'+'+Photo.likes++'+'
'+''；
});
$（'#photoBox'）.html（photoData）；
}
$.getJSON（unplashAPI、排序、显示照片）；
}); // 结束按钮

HTML:

---

--谢谢

在数据附加到页面后调用插件

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

功能显示照片（数据）{
var-photoData=''；
$。每个（数据、功能（i、照片）{
photoData+='+'+'+'+'+''照片作者：'+Photo.user.name++'
描述：真棒的照片作者'+Photo.user.name++'又名：'+Photo.user.username++'到目前为止，这张照片有'+'+Photo.likes++'+'
'+''；
});
$（'#photoBox'）.html（photoData）；
$（#photoBox'）。lightGallery({
选择器：'.tile'，
下载：错，
柜台：错，
zoom:错，
缩略图：错，
模式：“lg淡入淡出”
});
}

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

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