如何通過API在對齊圖庫中顯示Flickr圖像？

Question

我需要使用Miromannino對齊圖庫（http://miromannino.github.io/Justified-Gallery/），但我需要它來顯示從Flickr檢索的圖像。

代碼終於下來使用Ajax通過API retreiving從Flickr照片：

$.ajax({ 
     url: "https://api.flickr.com/services/rest/", 
     data: { 
      method: "flickr.photos.search", 
      api_key: "671aab1520e2cb69e08dd36a5f40213b", 
      tags: "beach,fashion", 
      format: "json", 
      nojsoncallback: 1 
     }, 
     success: function (response) { 
      $.each(response.photos.photo, function (index, value) { 
       $("#mygallery").append("<div><img src='http://farm" + value.farm + ".staticflickr.com/" + value.server + "/" + value.id + "_" + value.secret +".jpg'></div>"); 
      }) 
     } 
    }); 

但我就是不明白如何在對齊庫添加。

Answer 1

JustifiedGallery期望每個圖像都包含在<a>標籤中。最後，你必須在最後打電話.justifiedGallery()。下面是修改後的代碼：

$.ajax({ 
    url: "https://api.flickr.com/services/rest/", 
    data: { 
     method: "flickr.photos.search", 
     api_key: "671aab1520e2cb69e08dd36a5f40213b", 
     tags: "beach,fashion", 
     format: "json", 
     nojsoncallback: 1 
    }, 
    success: function (response) { 
     $.each(response.photos.photo, function (index, value) { 
      console.log(value); 
      var url = 'http://farm' + value.farm + '.staticflickr.com/' + value.server + '/' + value.id + '_' + value.secret + '.jpg'; 
      var a = $('<a>').attr({href: url}); 
      var img = $('<img>').attr({src: url}); 
      a.append(img); 
      $("#mygallery").append(a); 
     }); 
     $('#mygallery').justifiedGallery(); 
    } 
}); 

這裏，它是在行動：https://jsfiddle.net/tghw/raf1m6bL/