Ajax JSON数据和灯箱冲突 [英] Ajax JSON data and lightbox conflicts

问题描述

我有一个使用灯箱插件的图库设置 lightGallery

I have a gallery setup with the lightbox plugin lightGallery

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

The gallery works perfect with static HTML. The problem arises when I dynamically grab API data and try to have the lightbox working on those items.

我似乎无法使用另一个灯箱同时使用此功能和正确加载页面中的HTML块（加载一个这是动态生成的）。如果我能解决冲突，这个应用程序会执行正确的HTML抓取。

I can't seem to get another lightbox to both work with this function and load an HTML block from the page correctly (load the one that's been dynamically generated). This app does the correct HTML grabs, if I can get the conflict resolved.

任何初步想法？其他人遇到类似的事吗？

Any initial thoughts? Anyone else run into anything 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>

- 谢谢

推荐答案

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

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

这篇关于Ajax JSON数据和灯箱冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！