CODEWITHSUNDEEP
javascriptjqueryapigallerylightbox
nathananderson
nathananderson

Reputation: 91

Lightgallery plugin generating 3 copies of slides

I have a gallery loading images from an API then showing them with the lightgallery plugin.

After calling the lightbox in the correct location (see question here) I noticed the plugin is creating three slides for each photo.

There are 20 photos but it creates 60 slides.

Any thoughts on this? Anyone else run into something similar?

** Edit: Here is a CodePen with the page, error happing there: http://codepen.io/nathan-anderson/pen/GqXbvK

JS: 

// ----------------------------------------------------------------//
// ---------------// 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>

Upvotes: 0

Views: 147

Answers (1)

nathananderson
nathananderson

Reputation: 91

The issue was solved by separating the sections of code I wanted to generate within the function.

Here is the updated function code: 

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

Upvotes: 0

Related Questions