jQuery ci permette di integrare le nostre ultime foto da Flickr senza bisogno di installare plugin aggiuntivi. In questo articolo vedremo appunto come usare jQuery per integrare le nostre foto di Flickr nel nostro tema di Wordpress.
Aggiungere un widget di tipo Testo
Andate nella sezione Widget e aggiungete un widget di tipo Testo dove volete che appaiano le foto di Flickr. Inserite la seguente marcatura nel contenuto del widget:
<div id="flickr"></div>
Scrivere il codice jQuery
Inserite il seguente codice jQuery nel vostro file JavaScript del tema. Prima di farlo, tuttavia, dovete ottenere il vostro ID di Flickr usando questo servizio:
function getFlickrPhotos(limit) {
limit = limit || 5;
var url = 'http://api.flickr.com/services/feeds/photos_public.gne?id=31968388@N02&lang=it-it&format=json&jsoncallback=?';
$.getJSON(url, function(data) {
var html = '';
$.each(data.items, function(i,item) {
html += '<a href="' + item.link + '"><img src="'+item.media.m+ '"/></a>';
return i < limit;
});
$('#flickr').html(html);
});
}
Il parametro limit imposta il numero massimo di foto da restituire. L'indice di tale parametro inizia da zero ma potete sempre modificarlo aggiungendo 1 al suo valore finale. La funzione appena creata può essere usata in questo modo:
(function($) {
$(function() {
getFlickrPhotos();
});
})(jQuery);
Aggiungere gli stili CSS
La funzione jQuery genera la seguente marcatura:
<div id="flickr">
<a href="url"><img/></a>
<!-- altre immagini -->
</div>
Potete aggiungere degli stili CSS usando il foglio di stile del vostro template:
#flickr {
overflow: auto;
}
#flickr a {
float: left;
width: 32%;
padding-bottom: 4px;
}
#flickr a img {
border: none;
width: 100%;
display: block;
}