https://www.flickr.com/services/feeds/docs/photos_public/

這邊使用不需要key的feeds https://api.flickr.com/services/feeds/photos_public.gne

點進去的話會發現他不是json格式,不過只要在後面加上?format=JSON就可以轉換

$(document).ready(function(){
  $('button').click(function(){
    $('button').removeClass("selected");
    $(this).addClass("selected");
    var flickrapi = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var animal = $(this).text();
    var photosData = {
      tags: animal,
      format: "json"
    };

    function displayPhotos(data){
      var html = "<ul>";
      $.each(data.items,function(index, photo){
        html += '<li class="grid-25 tablet-grid-50">';
        html += '<a href="' +photo.link + '" class="image">';
        html += '<img src="'+ photo.media.m+'"></a></li>';
      });

      html += "</ul>";
      $("#photos").html(html);
    }
    $.getJSON(flickrapi,photosData, displayPhotos);

  }); // end button

}); // end ready

var flickrapi = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"

後面加上了?jsoncallback=?,這樣可以讓server知道我們是在request JSONP格式,這可以讓我們從別的網域要資料

    vat photosData = {
      tags: animal,
      format: "json"
    };

這邊可以用的東西需要參考flickr網頁

https://github.com/telsaiori/flickr_photo_search 這邊的是做成搜尋按鈕來找照片

增加了找不到照片時會跳視窗來通知

if ($.isEmptyObject(data.items) === true){
        alert("not found");
}