Эта статья была обновлена 23 июня 2016 года. В частности: пример кода был пересмотрен, добавлена демоверсия CodePen и исправлены проблемы с форматированием.
Flickr является ведущим сайтом изображений и видео, принадлежащим Yahoo. Они предлагают публичный API, который можно использовать для возврата списка фотографий, соответствующих определенным критериям.
Чтобы вернуть ответ API в формате JSON, вы должны отправить format
json
Например, следующее вернет список фотографий с тегом «котенок».
https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json
Этот метод запроса Flickr API не требует аутентификации. Вы можете найти список возможных аргументов здесь: https://www.flickr.com/services/api/flickr.photos.search.html .
Типичный объект Flickr JSON
Вот как выглядит типичный объект Flickr JSON:
jsonFlickrFeed({
"title": "Recent Uploads tagged kitten",
"link": "http://www.flickr.com/photos/tags/kitten/",
"description": "",
"modified": "2016-06-19T09:32:56Z",
"generator": "http://www.flickr.com/",
"items": [
{
"title": "Portrait of Simba and Mogli",
"link": "http://www.flickr.com/photos/112684907@N06/27665373772/",
"media": {"m":"http://farm8.staticflickr.com/7442/27665373772_25bb8acec1_m.jpg"},
"date_taken": "2016-06-17T17:09:38-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/112684907@N06/\">stefanhuber92<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/112684907@N06/27665373772/\" title=\"Portrait of Simba and Mogli\"><img src=\"http://farm8.staticflickr.com/7442/27665373772_25bb8acec1_m.jpg\" width=\"177\" height=\"240\" alt=\"Portrait of Simba and Mogli\" /><\/a><\/p> ",
"published": "2016-06-19T09:32:56Z",
"author": "[email protected] (stefanhuber92)",
"author_id": "112684907@N06",
"tags": "pet cats cute eye animal animals cat tiere kitten siblings katze katzen fell haustier liebe tier gemütlich petlove geschwister kuscheln schön catlove süs petlover"
},
...
19 more items
...
]
})
Загрузка изображений Flickr с помощью API JSONP
Как видите, ответ JSON обернут в функцию jsonFlickrFeed
Мы можем использовать это для извлечения изображений из Flickr и отображения их на нашей веб-странице следующим образом:
function jsonFlickrFeed(json) {
$.each(json.items, function(i, item) {
$("<img />").attr("src", item.media.m).appendTo("#images");
});
};
$.ajax({
url: 'https://api.flickr.com/services/feeds/photos_public.gne',
dataType: 'jsonp',
data: { "tags": "kitten", "format": "json" }
});
Если вы хотите узнать больше о JSONP, прочитайте: JQuery’s JSONP, объясненный с примерами
демонстрация
Это то, что мы в конечном итоге.
Вы можете узнать больше о Flickr API на домашней странице API .