Pinceladas da Web

Nesse tutorial vou mostrar como você pode mostrar em seu site, blog ou onde mais você quiser suas fotos do Flickr com a utilização da API do Flickr, jQuery, Ajax e JSON. Você não precisa de conhecimento avançado para entender esse tutorial, basta conhecimentos básicos de jQuery e JSON.

Não irei me adentrar muito em detalhes sobre o HTML e o CSS, pois ele ficam a seu critério, portanto, vamos diretamente ao JavaScript:

Abaixo você pode ver a URL de requisição do Ajax:

http://api.flickr.com/services/feeds/photos_public.gne?id='+userid+'&format=json&jsoncallback=?

Na URL citada acima você encontra uma variável chamada ‘userid’, é nela que você deve colocar o seu ID de usuário do Flickr. Caso você não saiba seu ID de usuário no Flickr, basta visitar o site idGettr e digitar seu username. Já o jsoncallback é o códio que irei executar após o carregamento do arquivo JSON.

Nessa URL você pode ver um exemplo de uma resposta JSON com as últimas fotos de um usuário qualquer do Flickr:

Agora nosso código JavaScript então fica da seguinte forma:

function flickr(user){
	$.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?id='+user+'&format=json&jsoncallback=?', function(data){
		for(i=0; i<12; i++){
			$("<img />").attr("src", data.items[i].media.m).appendTo("#flickr").wrap("<a href='" + data.items[i].link + "' title='" + data.items[i].title + "' target='_blank'><\/a>");
		}
	});
}

Para um melhor entendimento do código criei uma função chamada flickr com uma variável user, é nela que você deve passar o ID do usuário do Flickr, após uso um loop for para percorrer o JSON, pegar as últimas 12 fotos e colocar as mesmas dentro da div com o ID flickr.

Com o jQuery na sua página, basta então chamar a função ao carregar a página. Exemplo:

$(document).ready(function(){
	flickr('21088294@N00');
});

Vejam o exemplo da galeria em ação.

[Update 28-07-2011]: Aqui um exemplo com a utilização do Shadowbox: http://www.pinceladasdaweb.com.br/blog/uploads/flickr-photos/2/