Quanti di noi possiedono un account su Flickr e mantengono aggiornato il loro profilo fotografico costantemente? Immagino davvero molti, me compreso; dunque magari, in questo modo potremo aggiornare un sito gratuito e catturare dallo stesso alcune delle immagini nel nostro sito personale; un esempio concreto avviene nel nostro sito Beat Fly all’interno del footer, dove sono mostrate random alcune immagini catturate da amici e preferiti vari all’interno del pool di Flickr. In questo breve e semplice tutorial, sfrutteremo il framework jQuery per connetterci ad un feed di Flickr, magari il nostro e catturare alcune immagini trasformando lo stesso in una chiamata callback JOSON.
Per prima cosa accediamo al nostro account Flickr e visualiziamo il nostro Album; in fondo alla pagina vedremo il simbolo del nostro RSS Feed, clicchiamo e copiamo l’URL; notiamo come l’indirizzo porti alla codifica di un RSS 2, mentre noi abiamo bisogno di un formato JSON; niente paura, ricopiate l’URL e aprite il vostro editor preferito per iniziare a scrivere il codice.
Importiamo il framework jQuery come primo script e successivamente apriamo i tag di script per scrivere il nostro codice js personalizzato;
1 2 3 4 5 6 7 8 | $.getJSON("http://api.flickr.com/services/feeds/photos_faves.gne?nsid=17056146@N00&lang=it-it&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ if(i<10) { $("<img />").attr("src", item.media.m).appendTo("#flickrbox") .wrap("<div class='images'><a href='" + item.link + "'></a></div>"); } }); }); |
Come vedete il nostro collegamento RSS è stato modificato nell’ultima parte in JSON e a questo punto possiamo manipolare la sintassi come meglio vogliamo; per avere un’idea di come venga trasformato il codice dal formato RSS in JSON, provate ad aprire URL nel browser.
A questo punto creiamo una variabile i e definendo quante immagini vogliamo catturare costruiamo l’HTML per ogni item; definiamo il nostro contenitore generale #flickrbox e per inseriamo ogni item all’inteno di un DIV con classe .images
Il gioco è fatto, cambiate la formattazione CSS e il numero di immagini da catturare e non avete bisogno di altro; ricordatevi il copyright nel caso prendeste URL di un pool che non sia il vostro.
Scarica il tutorial dal sito Beat Fly.
4 Commenti a “jQuery Flickr gallery”
A proposito di gallerie che recuperano dati da Flickr, stiamo realizzando un’applicazione rivolta a tutti i web designer che permette di inserire una serie di widget nelle pagine dei siti che state realizzando semplicemente aggiungendo poche righe di codice nelle vostre pagine (come fa Google analitycs); tra questi ce ne è una galleria fotografica che recupera le immagini non tanto dai Feeds (RSS), quanto dai SETs (le gallerie) di Flickr. Se volete un’esempio:
http://patapage.com/demo/indexDocked.jsp#
e cliccate sul bottone “gallery” sul bordo sinistro della pagina.
Grazie Matteo, la tua soluzione mi sembra davvero ottima.
Ottimo tutorial, semplice da realizzare e di facile comprensione..
Da digiuno di javascript ho una domanda..
Vedo che nel footer hai incluso le miniature delle immagini tratte da Filckr.. per intenderci quelle il cui indirizzo termina con “_s.jpg”. Nel tutorial invece vengono incluse quelle con “_m.jpg” finale.. ho provato ad aggiungere “.replace(“_m.jpg”, “_s.jpg”)” in questo modo:
[code]
if(i<10) { $("").attr("src", item.media.m).replace("_m.jpg", "_s.jpg").appendTo("#flickrbox")[/code]
ma come risultato non vedo più lo stream. Dove sbaglio?
Le lettere s,m sono il formato delle miniature offerte da flickr dunque senza il replace puoi scegliere quale formato retrivare.