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

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.

Tag: , ,

L'autore

Appassionato di web design da qualche anno, ha deciso di prendere la strada del "uebdeveloper" perché ritiene di essere negato con la grafica (anche se ogni tanto ci prova lo stesso), spera di diventare presto un bravo sviluppatore.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

17 commenti

Trackback e pingback

  1. 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…
  2. 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…
  3. 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…

Lascia un Commento