javascript – Ajax JSON数据和灯箱冲突

我有一个灯箱设置与灯箱插件lightGallery

该库与静态HTML完美配合.当我动态获取API数据并尝试让灯箱处理这些项目时,就会出现问题.

我似乎无法使用另一个灯箱同时使用此功能并正确加载页面中的HTML块(加载已动态生成的那个).如果我能解决冲突,这个应用程序会执行正确的HTML抓取.

最初的想法？其他人遇到类似的事吗？

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>

– 谢谢

解决方法:

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

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