Chargez des images Flickr à l'aide de l'API JSONP

Cet article a été mis à jour pour la dernière fois le 23 juin 2016, avec des révisions de code, une démo de codepen et un formatage amélioré.

Flickr, une plate-forme appartenant à Yahoo pour partager des photos et des vidéos, fournit une API publique pour récupérer des listes de photos basées sur des critères spécifiques.

Pour recevoir des réponses API format JSON, incluez le paramètre format=json dans votre demande. Par exemple, cela récupère les photos taguées "Kitten":

<code>https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json</code>

Cette requête API Flickr ne nécessite pas d'authentification. Une liste complète des paramètres est disponible ici: https://www.php.cn/link/b1370fcd515bccf46591ed09a543d21b .

Flickr JSON Object Structure

Une réponse flickr json typique ressemble à ceci:

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="%5C%22http://www.flickr.com/people/112684907@N06/%5C%22">stefanhuber92 posted a photo: <p><a and='\"href=\"http://www.flickr.com/photos/112684907@N06/27665373772/\"' mogli='\"of=\"' simba='\"title=\"Portrait\"'><img alt='\"Portrait\"' and='\"height=\"240\"' mogli='\"of=\"' simba='\"src=\"http://farm8.staticflickr.com/7442/27665373772_25bb8acec1_m.jpg\"'    style="max-width:90%"177\"'> ",
      "published": "2016-06-19T09:32:56Z",
      "author": "nobody@flickr.com (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 ...
  ]
})</a></p></a></p>

Remplir des images Flickr avec l'API JSONP

La réponse JSON est enveloppée dans la fonction jsonFlickrFeed. Cela nous permet d'intégrer des images Flickr dans notre page Web:

function jsonFlickrFeed(json) {
  $.each(json.items, function(i, item) {
    $("<img  alt="Chargez des images Flickr à l'aide de l'API JSONP" >").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" }
});

Pour en savoir plus sur JSONP, voir: JSONP de JQuery expliqué avec des exemples

démo

Affichez la sortie résultante ici:

Voir le stylo vkxzrz par SitePoint (@SitePoint) sur Codepen.

Plus de détails sur l'API Flickr sont disponibles sur la page d'accueil de l'API.

Questions fréquemment posées (FAQ)

Cette section répond aux questions courantes sur l'utilisation de l'API Flickr pour charger des photos, couvrant des sujets tels que l'obtention de l'objet JSON correct, la compréhension des clés de l'API, la recherche de photos, la gestion des erreurs, l'affichage des photos, le téléchargement de photos, la pagination, la récupération des métadonnées, l'accès aux photos utilisateur et la nécessité des clés de l'API. (La section FAQ d'origine est conservée, mais reformulée pour la concision et pour éviter la répétition.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!