Question

我有一个图库从API加载图像，然后使用lightgallery插件显示它们。

在正确的位置（see question here)）调用灯箱后，我注意到该插件为每张照片创建了三张幻灯片。

共有20张照片，但它创造了60张幻灯片。

对此有何想法？其他人遇到类似的东西？

**编辑：这是一个带有页面的CodePen，错误在那里徘徊：http://codepen.io/nathan-anderson/pen/GqXbvK

JS：

<div class="ji-slider" data-animation="fadeIn"> <div class="ji-active first_slide"> <img src="Images/Slider (1).png"> <p class="ji-caption">This Is First !</p> </div> <div class=last_slide> <img src="Images/Slider (2).png"> <p class="ji-caption">This Is Second !</p> </div> <button type="button" class="ji-pre-btn">&#10094;</button> <button type="button" class="ji-next-btn">&#10095; </button> </div>
If($(".first_slide").css("display") == "block"){
    $(".ji-pre-btn").hide();
    $(".ji-next-btn").show();
}else{
    $(".ji-pre-btn").show();
    $(".ji-next-btn").hide();
}

$(".ji-next-btn").click(function(){
$(".first_slide").hide();
});

$(".ji-pre-btn").click(function(){
$(".first_slide").show();
});

HTML：

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

Answer 1

通过分离我想在函数中生成的代码部分来解决问题。

这是更新的功能代码：

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

Lightgallery插件生成3份幻灯片

1 个答案: