Jquery: Come recuperare le immagini da Flickr?
In questi giorni mi sto esercitando un po’ con javascript ed in particolare con il noto framework jQuery. Dopo aver realizzato le basi per un piccolo slideshow di immagini mi sono chiesto: “e se mi connettessi al mio account flickr per recuperare dinamicamente le foto?”.
Quello che ti presento è un piccolo script per collegarti ad un account di Flickr (ricordati di chiedere prima il permesso se l’account non è il tuo), puoi vedere una semplice dimostrazione a questo indirizzo.
Cominciamo!
Per prima cosa dobbiamo creare una pagina xhtml che chiameremo index.html (va bene qualsiasi doctype, ma io ormai sono abituato ad usare xhtml1.0 strict):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="flickrRealSizeContainer"></div>
<div id="flickrThumbsContainer"></div>
</body>
</html>
I due div che abbiamo inserito serviranno da contenitori per le immagini e le miniature.Prima della chiusura del tag body inseriamo il collegamento a jquery e quello al nostro script, che chiameremo function.js:
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/function.js"></script>
Ora siamo pronti!
Function.js
Apriamo il nostro editor preferito e scriviamo questa funzione:
function getFlickrStream(id, number)
{
flickrUrl = id ? "http://api.flickr.com/services/feeds/photos_public.gne?id="+id+"&format=json&jsoncallback=?" : "http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=?";
numOfImages = number ? number-1 : 9;
$.getJSON(
flickrUrl, function(data){
$.each(data.items, function(i,item){
if(i < numOfImages)
{
var thumbItem = item.media.m;
var realSizeItem = thumbItem.slice(0, -6)+thumbItem.slice(-4);
$('</pre>
<img alt="" />
<pre>').attr('src', thumbItem).appendTo("#flickrThumbsContainer");
$('</pre>
<img alt="" />
<pre>').attr('src', realSizeItem).appendTo("#flickrRealSizeContainer");
}
else
{
return false;
}
});
});
};
Quindi salviamo il file chiamandolo function.js.
Cosa abbiamo fatto? Nelle prime due righe della funzione non abbiamo fatto altro che dichiarare le variabili flickrUrl e numOfImages.
- flickrUrl sarà uguale all’url dell’account da noi scelto nel caso in cui l’attributo id faccia riferimento ad un id di flickr valido (ti spiegherò dopo come ricavare il tuo), altrimenti sarà uguale all’url dello stream pubblico;
- numOfImages invece sarà uguale al valore del parametro number (decrementato di uno) se questo viene passato alla funzione, altrimenti gli diamo il valore 9 (per mostrare le ultime dieci immagini caricate).
Quello che segue è il cuore della funzione, usiamo il metodo .getJSON che ci permette di recuperare i dati in formato JSON direttamente dal nostro stream di Flickr, ma analizziamo il codice più nel dettaglio:
$.each(data.items, function(i,item)
Iniziamo un ciclo, il numero di iterazioni varia in base al valore della variabile numOfImages.
if(i < numOfImages)
All’inizio del ciclo controlla se la variabile i è minore del numero massimo di immagini da noi scelto, se la condizione è vera assegna alla variabile thumbItem il “percorso” della foto corrente nello stream di Flickr e alla variabile realSizeItem non assegna altro che lo stesso valore modificato per fare in modo di restituire l’url della foto in alta risoluzione.
N.B.: l’url tipico di una foto di flickr è nel formato http://farm6.static.flickr.com/5157/5821157980_c2cedd1a11m_m.jpg, i metodi .slice non fanno altro che eliminare una parte dell’url, per l’esattezza eliminano i caratteri _m prima dell’estensione per ottenere così il link della foto in hi-res.
Quindi procede con la creazione dei tag img per le anteprime e per le immagini ad alta risoluzione, e li inserisce in due differenti div. Nulla di così complicato vero?
Come faccio a recuperare il mio FlickrID?
Recuperare l’id di Flickr è molto semplice: collegati con il tuo account, apri il tuo album e scorri la pagina fino in fondo, dove troverai l’icona dei feed RSS, clicca con il tasto destro del mouse sull’icona e scegli la voce “copia link” (può variare a seconda del browser), quindi incollalo su un qualsiasi editor di testo, avrai qualcosa del genere:
http://api.flickr.com/services/feeds/photos_public.gne?id=38468033@N05&lang=it-it&format=rss_200
il tuo id si trova proprio subito dopo la parola id all’interno dell’url: nel mio caso è 38468033@N05 (ricordati che l’ultimo carattere dell’id è quello che precede la & (e commerciale).
Come recuperare l'id del nostro account Flickr
N.B.: avrai notato che la fine del link ai feed di Flickr termina con “format=rss_200”, mentre l’url presente all’interno della nostra funzione termina con “format=json&jsoncallback=?”, ciò è perfettamente normale, ne non facessimo questa modifica non potremmo manipolare i dati nel formato giusto.
Conclusioni
Abbiamo visto come recuperare le foto dal nostro account Flickr grazie a jQuery e abbiamo visto che non è poi così complicato.
Ora che anche tu sei in grado di connetterti al tuo account Flickr, che genere di applicazione realizzeresti? Utilizzeresti questo script in qualcuno dei tuoi progetti?
Nei prossimi articoli useremo quello che abbiamo visto oggi per creare uno slider di immagini recuperate dinamicamente da Flickr e in seguito ne realizzeremo anche un plugin per WordPress.
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
17 commenti
Trackback e pingback
-
jQuery+Flickr: Realizziamo un semplice slideshow | Your Inspiration Web
[...] precendente articolo abbiamo visto come utilizzare jQuery per recuperare le immagini da un account di Flickr, in questo articolo ... -
FlickrPhotogallery : un plugin wordpress che sfrutta le API di Flickr | Your Inspiration Web
[...] settimana fa ho mostrato come recuperare le foto da Flickr e come realizzare un semplice slideshow utilizzando il flusso ... -
Flickr API: da dove cominciare? | Your Inspiration Web
[...] un precedente articolo abbiamo visto come recuperare le immagini da Flickr con Javascript, agganciandoci al flusso RSS di un ...
Bell’articolo, interessante e facile. In sostanza si aggancia ad un semplice RSS e non alle API. Ma per quanto riguarda i set?
Grazie Daniele, esatto, in questo caso le API di Flickr non vengono usate, a favore degli rss.
Per quanto riguarda i set è un discorso che sto ancora approfondendo in quanto ho avuto anche io lo stesso dubbio e con json non sembra funzionare, penso che l’unico modo sia usare le API; appena ne ho la padronanza realizzo un tutorial, intanto questo (e quelli che seguiranno) è un buon inizio :)
Ottimo tutorial, grazie. Mi piacerebbe riuscire ad inserire anche i set, creando una photogallery (lo fa ad esempio Flikrpress per wordpress e lo faceva Morfeoshow per Joomla).
Lo trovo un ottimo sistema per sfruttare tutte le potenzialità di Flickr (visibilità, semplicità di upload, costante aggiornamento a carico del tim di flickr) ed ottenere un “frontend” (diciamo così) completamente diverso e integrato nel nostro sito, pagina di fb e chi più ne ha più ne metta :)
Ciao Elisa e grazie per i complimenti :)
Come ho risposto sopra a Daniele, è un discorso che sto ancora approfondendo, vedró di farne un tutorial a breve, subito dopo il successivo :)
@Elisa : E’ proprio la problematica che ho sollevato io. Flickr si basa praticamente sui Set per ordinare meglio le fotografie (e come non potrebbe?), sarebbe bello ptoerli integrare in questo script ma ho paura che servano le API. In quel caso potrei scomodare Asp.Net.
Si puó fare tranquillamente con php, almeno per l’album generale :)
Spunto interessante.
Non vorrei dire una cavolata, ma credo che le API di Flickr possano lavorare tranquillamente con javascript, potendo restituire un risultato in formato JSON.
Ciao Daniele e grazie, penso sia possibilissimo fare come dici tu, non mi sono ancora addentrato seriamente nelle API di Flickr, ma stai tranquillo che appena me le studio per bene ci scrivo due righe :)
@Daniele: non l’avevo visto il tuo commento perché sono stata sul mio 10 minuti a causa della coniglia che voleva fulminarsi su un cavo 220. Maledetta… (ti voglio bene rospa, dai, porta pazienza e smettila con i cavi).
Bravo Tiziano, ottimo articolo e ottimo programma per il proseguimento!
Benvenuto in redazione :-)
Grazie Maurizio, spero di essere all’altezza di “voialtri” ;-)
il plugin per WordPress potrebbe essere una cosa davvero interessante, con un po’ di creatività si potrebbero permettere molti modi di integrazione e personalizzazione delle foto di un account flickr.
complimenti tizi!
Grazie mille Nando, e grazie soprattutto per avermi dato la possibilità di essere dei vostri :)
P.S.: Scusa tutto il disturbo che ti do su skype ;-)
Ciao a tutti,
ho appena iniziato a sviluppare un plugin per jQuery per accedere agevolmente ai dati sul Web, come per esempio Flickr.
Il plugin intenzionalmente implementa solo il download di tali dati(da qui il nome di jquey.retriever),
poi sta all’utente del plugin usarli nel modo voluto, per esempio per la realizzazione di uno slideshow.
Un semplici esempio di utilizzo e’ https://github.com/mgiulio/jquery-retriever/blob/master/index.html .
Però prima si deve fornire al plugin la propria apikey.
Al momento sono implementati i seguenti servizi ed operazioni:
- Flickr
- photostream di un un utente
- foto da un set
- favoriti
Cosa vi sarebbe + utile?
- Picasa
- DeviantArt
- Tumblr
- Twitter
- …?
Sto considerando l’opportunità di aggiungere un sistema di templating per facilitare la generazione del markup.
Il plugin è su Github: https://github.com/mgiulio/jquery-retriever , così è facile contribuire,
segnalare bugs e chiedere features.
Bye.
P.S. Buon Anno:)