4
Ich habe eine Galerie-Setup mit dem Leuchtkasten Plugin lightGalleryAjax JSON-Daten und Leuchtkasten Konflikte
Die Galerie mit statischen HTML perfekt funktioniert. Das Problem tritt auf, wenn ich API-Daten dynamisch erstelle und versuche, den Leuchtkasten an diesen Elementen zu arbeiten.
Ich kann nicht scheinen, einen anderen Leuchtkasten zu bekommen, um mit dieser Funktion und einen HTML-Block von der Seite richtig zu laden (laden Sie den, der dynamisch erzeugt worden ist). Diese App macht die richtigen HTML-Griffe, wenn ich den Konflikt lösen kann.
Irgendwelche ersten Gedanken? Hat sonst noch jemand ähnliches erfahren?
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>
- Dank