Lightgallery plugin erzeugt 3 Kopien von Dias

Question

Ich habe eine Galerie, die Bilder von einer API lädt und sie dann mit dem Lightgallery Plugin zeigt.

Nach den Leuchtkasten an der richtigen Stelle der Rufnummer (see question here) bemerkte ich das Plugin für jedes Foto drei Dias erstellt.

Es gibt 20 Fotos aber es schafft 60 Dias.

Irgendwelche Gedanken dazu? Jedermann laufen in etwas anderes ähnlich

** Edit:? Hier ist eine CodePen mit der Seite, Fehler happing es: http://codepen.io/nathan-anderson/pen/GqXbvK

JS:

012.351.

// ----------------------------------------------------------------// 
// ---------------// Unsplash Photos //---------------// 
// ----------------------------------------------------------------// 
    function displayPhotos(data) { 
     var photoData = ''; 
     $.each(data, function (i, photo) { 
      photoData += '<a class="tile"' + 'data-sub-html="#' + photo.id + '"'+ '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:' + '<a target="_blank" href="' + photo.links.html + '">' + photo.user.username + ')</a>' + ' So far this photo has ' + '<span>' + photo.likes + '</span>' + ' Likes.' + ' You can download this photo if you wish, it has a free <a target="_blank" href="https://unsplash.com/license"> Do whatever you want </a> license. <a target="_blank" href="' + photo.links.download + '"><i class="fa fa-download" aria-hidden="true"></i> </a> </p>' + '</div>' + '</a>'; 
     }); 
      // Putitng into HTML 
     $('#photoBox').html(photoData); 

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

// Show popular photos on pageload 
$.getJSON(unsplashAPI, popularPhotos, displayPhotos); 

HTML:

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

Answer 1

Das Problem wurde durch die Trennung der Abschnitte des Codes gelöst I innerhalb der Funktion erzeugen wollte. Hier

ist die aktualisierte Funktionscode:

function displayPhotos(data) { 
    var photoData = ''; 
    var photoInfo = ''; 
    $.each(data, function(i, photo) { 
     photoData += '<a class="tile"' + 'data-sub-html="#' + photo.id + '"' + 'data-src="' + photo.urls.regular + '">' + '<img alt class="photo" src="' + photo.urls.regular + '">'; 
      photoInfo += '<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:' + '<a target="_blank" href="' + photo.links.html + '">' + photo.user.username + ')</a>' + ' So far this photo has ' + '<span>' + photo.likes + '</span>' + ' Likes.' + ' You can download this photo if you wish, it has a free <a target="_blank" href="https://unsplash.com/license"> Do whatever you want </a> license. <a target="_blank" href="' + photo.links.download + '"><i class="fa fa-download" aria-hidden="true"></i> </a> </p>'; 
    }); 
    // Putitng into HTML 
     photoData += '</a>'; 
     photoInfo += '</div>'; 
    $('#photoBox').html(photoData + photoInfo);