jQuery: visualizzare le foto di Picasa Web

Tramite JSONP (JSON with Padding) e jQuery possiamo accedere ai dati delle nostre foto caricate su Picasa Web e visualizzare i nostri ultimi upload. Vediamo i dettagli di questa soluzione.

Definiamo un contenitore per le nostre foto:


<div id="latest-picasaweb-images">
    <ul></ul>
</div>​

Quindi operiamo sul feed JSON in questo modo:


$(document).ready(function() {
    $.getJSON("http://picasaweb.google.com/data/feed/base/user/109024920426177957636/?kind=photo&access=public&alt=json&callback=?",
    function(data) {
        var target = "#latest-picasaweb-images ul";
        for (i = 0; i <= 9; i = i + 1) { 
            var pic = data.feed.entry[i].media$group;
            var liNumber = i + 1;
            var thumbSize = 1;
            $(target).append("<li class='no-" + liNumber + "'><a title='" + pic.media$description.$t + "' href='" + pic.media$content[0].url + "'><img src='" + pic.media$thumbnail[thumbSize].url + "' /></a></li>");
        }
    });
});​

Dobbiamo:

  • Specificare il nostro ID utente (in questo caso è 109024920426177957636).
  • Specificare la dimensione delle thumbnail (0, 1, 2, ossia small, medium o large).

Potete visionare l'esempio finale in questa pagina.

Torna su