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.
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.
