API Flickr - Criando um mosaico de fotos

Para quem deseja adicionar no seu blog ou no seu site um Mosaico com fotos do Flickr basta seguir o tutorial abaixo.
Vocês verão que é bem simples e fácil de implementar. Usando a API do próprio Flickr em conjunto com a JQuery.

1° Passo:
- Inserindo a JQuery:
Se você não tem ou não quer disponibilizar em seu dominio a API da JQuery, você pode chama-la através do Google usando a seguinte sintaxe:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

2° Passo:
- Configurando o CSS para o Mosaico:
    <style type="text/css">
    // Referente ao box do Flickr
    #contentFlickr {
         border: 0px;
         width: 240px;
         height: 340px;
    }
    // Links
    #contentFlickr a{
        border: 0;
    }
   
    // Referente a cada box de imagem
    .imgItem {
        border: 0;
        width: 80px;
        height: 80px;
    }
    </style>

3° Passo:
- Criar o elemento que receberá o Mosaico:

<div id="contentFlickr"></div>

4° Passo:
- Chamada JS para a API do Flickr com as fotos.

<script type="text/javascript">
/*
* URL com o JSON contendo as fotos
* Troque o valor do parametro ID (49502986292) pelo valor do Flickr que você deseja buscar as fotos
*/
var strUlr = "http://api.flickr.com/services/feeds/groups_pool.gne?id=49502986292@N01&lang=en-us&format=rss_200&format=json&jsoncallback=?";

/*
* Totalizador de fotos, atribua aqui a quantidade de fotos que você quer no Mosaico
*/
var totalPhotos = 9;

$.getJSON(strUrl, function(data){
  $.each(data.items, function(i,item){
    if (i < totalPhotos){
        $("#contentFlickr").append('<a href="' + item.link + '" class="imgItem"><img src="' + item.media.m +'" class="imgItem"/></a>');
    }
  });
});
</script>

O resultado final é este:


Se quiser personalizar, basta mexer no CSS agora ;)

* Desculpem pelo código meio solto no post, é que as tags PRE e o HighlightCode não funcionam de jeito algum no Blogspot.