Een Flickr widget met jQuery maken

Flickris een goeie manier op je foto's te delen met de rest van de wereld. Elke maand kun je gratis 300mb aan data uploaden, en voor een paar tientjes kan dit zelfs bijgesteld zodat je onbeperkt foto's kunt uploaden. Daarbuiten bied het om de foto's heen nog heel veel mogelijkheden: Onder andere tonen op de kaart, commentaar achterlaten en galerijen maken van je mooiste foto's. Én wat ze ook aan bieden: Een uitgebreide API. Laat die nou net even mooie opties bieden!

Flickr logo

Als voorbeeld ga ik er vanuit dat je de jQuery slider tutorial hebt gevolgd. Deze gaan wij namelijk hier nu ook gebruiken, zij het met wat uiterlijke aanpassingen.

Api Key

Allereerst hebben we een API key nodig, dit kost niks en kun je op deze pagina aanvragen. Kies de optie die van toepassing is op jou, vul het formulier in en stuur deze op. Op de pagina die volgt krijg je een API key toegewezen. Schrijf deze op, die hebben we later nodig.

Set ID

Het volgende wat we nodig hebben is het Set ID. Deze kan heel eenvoudig achterhaald worden. Ga naar Flickr, en ga naar de set die je wilt gebruiken, zorg dat je op de overzicht pagina zit. De URL zal er ongeveer zo uitzien:

http://www.flickr.com/photos/gebruikersnaam/sets/12345678910111213/

Het getal in deze URL, in dit voorbeeld 12345678910111213 hebben we nodig. Schrijf ook deze op.

Foto's ophalen

Nu we de API key hebben en het Set ID kunnen we de data gaan ophalen. Dat is eigenlijk vrij simpel, en Flickr heeft dat heel goed beschreven op hun website. Van de Flickr API hebben wij de methode flickr.photosets.getPhotos nodig. Gelukkig heeft Flickr goed beschreven wat hier de mogelijkheden van zijn: http://www.flickr.com/services/api/flickr.photosets.getPhotos.html. Onderaan de pagina bij API Explorer kun je doorklikken naar een pagina waar je de mogelijkheden meteen kunt uitproberen.

Zoals uit het voorbeeld blijkt kun je de foto's ophalen met de volgende link:

http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=XXX&photoset_id=12345678910111213

Het nadeel hiervan is is dat de data in XML formaat wordt geleverd. jQuery kan dat prima uitlezen, maar het betreft hier een cross-domain request en dan wordt Javascript gelimiteerd waardoor dit uitgelezen kan worden. Gelukkig is hier een oplossing voor die ook door Flickr wordt ondersteund: JSONP. Hiermee kunnen wel cross-domain requests gemaakt worden. Aan de URL moet dan het volgende worden toegevoegd:

&format=json&jsoncallback=?

Wanneer je die URL oproept krijg je een lang stuk tekst te zien. Voor ons moeilijk leesbaar, voor Javascript/jQuery gelukkig niet.

JSON ophalen met jQuery

Het ophalen van een JSON met jQuery stelt niet zoveel voor. jQuery biedt daar een aantal mogelijkheden in, via de functies http://api.jquery.com/jQuery.getJSON/ of simpelweg via de standaard AJAX methode. Deze laatste gaan we gebruiken

Omdat de URL nogal eens kan veranderen omdat er bijvoorbeeld gebruik wordt gemaakt van verschillende sets of omdat er een privacy_filter wordt aangezet, gaan we de URL opbouwen door middel van een object. Dat ziet er zo uit:

  1. $( function () {
  2.         $data = {}; // Object aanmaken
  3.         $data.method = 'flickr.photosets.getPhotos';
  4.         $data.api_key = 'XXX';
  5.         $data.photoset_id = '12345678910111213';
  6.         $data.format = 'json';
  7.        
  8.         $.ajax({
  9.                 url: 'http://api.flickr.com/services/rest/?jsoncallback=?',
  10.                 data: $data,
  11.                 type: 'GET',
  12.                 dataType: 'jsonp',
  13.                 success: function (data) {
  14.                
  15.                 }
  16.         });
  17. });

Nu de data opgehaald wordt kunnen wij deze gaan uitlezen. Het makkelijke van JSON is is dat je de opgehaalde data als een Javascript array kan uitlezen. In dit geval kunnen we de foto's 1 voor 1 uitlezen door gebruik te maken van data.photoset.photo.

Links maken

Een nadeel, maar aan de andere kant ook weer een voordeel van de API is dat er geen links naar plaatsen worden meegestuurd, die moet je zelf opbouwen. Dat heeft als nadeel dat je meer ontwikkel werk moet doen, maar heeft als voordeel dat je veel meer vrijheid hebt omdat je zelf kan kiezen welk formaat je wilt gebruiken. Meer over hoe de URLs opgebouwd dienen te worden kun je hier lezen. Om de data in het voorbeeld om te zetten in URLs heb ik de volgende functie gemaakt:

  1. function create_flickr_url(photoData, size) {
  2.         switch(size) {
  3.                 case 'small-square':
  4.                         photoData.size = 's'; // small square 75x75
  5.                 break;
  6.                 case 'square':
  7.                 case 'large-square':
  8.                         photoData.size = 'q'; // large square 150x150
  9.                 break;
  10.                 case 'thumbnail':
  11.                         photoData.size = 't'; // thumbnail, 100 on longest side
  12.                 break;
  13.                 case 'small-240':
  14.                         photoData.size = 'm'; // small, 240 on longest side
  15.                 break;
  16.                 case 'small':
  17.                 case 'small-320':
  18.                         photoData.size = 'n'; // small, 320 on longest side
  19.                 break;
  20.                 case 'medium-500':
  21.                         photoData.size = '-'; // medium, 500 on longest side
  22.                 break;
  23.                 default:
  24.                 case 'medium':
  25.                 case 'medium-640':
  26.                         photoData.size = 'z'; // medium 640, 640 on longest side
  27.                 break;
  28.                 case 'medium-800':
  29.                         photoData.size = 'c'; // medium 800, 800 on longest side†
  30.                 break;
  31.                 case 'large':
  32.                         photoData.size = 'b'; // large, 1024 on longest side*
  33.                 break;
  34.                 case 'original':
  35.                         photoData.size = 'o'; // original image, either a jpg, gif or png, depending on source format
  36.                 break;
  37.         }
  38.        
  39.         return 'http://farm' + photoData.farm + '.staticflickr.com/' + photoData.server + '/' + photoData.id + '_' + photoData.secret + '_' + photoData.size + '.jpg';
  40. }

In combinatie met het ophalen van de data en deze uitlezen komt de succes functie er dan zo uit te zien:

  1. success: function (data) {
  2.         $.each( data.photoset.photo, function(index, photo) {
  3.                 photo.url = create_flickr_url(photo);
  4.         });
  5. }

Nu we dit kunnen komen we uit bij het volgende onderdeel, namelijk de

HTML opbouwen

De jQuery slider uit de andere tutorial verwacht een ul met daarin een li met daarin de afbeelding, en dat voor elk plaatje. Dit kan vrij eenvoudig gerealiseerd worden met behulp van jQuery:

  1. success: function (data) {
  2.         $html = '';
  3.         $.each( data.photoset.photo, function(index, photo) {
  4.                 photo.url = create_flickr_url(photo);
  5.                
  6.                 $html += '<li><img src="' + photo.url + '"></li>';
  7.         });
  8.        
  9.         $("#slider ul").html( $html );
  10. }

Nu zijn alle elementen compleet en kan het geheel samen gevoegd worden.

Eindresultaat

Het eindresultaat is hier te vinden:

Alle code die hierbij hoort is hier de vinden:

De originele jQuery slider is amper aangepast. Alles wat er is aangepast is het wijzigen van het formaat, plus dat de $slider.start(); is verplaatst naar de success functie. Dat is om te voorkomen dat de slider al gaan lopen voordat de elementen aanwezig zijn.