2

API からのページ読み込み時に写真を読み込むページがあります。

** 編集: ここにページ付きの CodePen があります。エラーが発生しています: http://codepen.io/nathan-anderson/pen/GqXbvK

ページを最初にロードするとき、これを使用して情報を呼び出し、lightgallery プラグインを使用します。

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

写真のさまざまな順序を表示するための複数のボタンがあります。API は、「order_by」オプションに基づいてさまざまな写真を取得します。

これは、さまざまなセクションを表示するための私のコードです:

var popularPhotos = {
    order_by: "popular",
    format: "json"
};
var latestPhotos = {
    order_by: "latest",
    format: "json"
};
var oldestPhotos = {
    order_by: "oldest",
    format: "json"
};
// Button Click Changes
    $('button').click(function () {
        $('button').removeClass("active");
        $(this).addClass("active");
    }); // End button

// Show Popular Photos
    $('#popular').click(function () {
        $.getJSON(unsplashAPI, popularPhotos, displayPhotos);
    }); // End button
// Show latest Photos
    $('#latest').click(function () {
        $.getJSON(unsplashAPI, latestPhotos, displayPhotos);
    }); // End button
// Show oldest Photos
    $('#oldest').click(function () {
        $.getJSON(unsplashAPI, oldestPhotos, displayPhotos);
    }); // End button

これにより、ボタンのクリック時に新しい写真が読み込まれますが、ライトボックス プラグインの機能が損なわれます。

何かご意見は？他の誰かがこれに遭遇していますか？

- ありがとう

4

1 に答える 1