Why post pictures of myself when I can post pictures of my son? He's much more adorable, trust me. Since I'm lazy I don't want to upload the same files to my blog that have already been organized and published to his photo stream in Picasa. The work has already been done, so I should be able to to query the Picasa stream and with some simple jQuery code, the magic can all happen in the client-side browser.
We can use the getJSON jquery method for retrieving a lot of google data across many google products. Picasa (Google's answer to Flickr or other photo stream sites) exposes its own flavor of the familiar gData interface. By building a URI that corresponds to a particular photo album, it's easy to display the thumbnails from a few recent pictures in the album.
http://picasaweb.google.com/data/feed/api/user/lkostoulakos/albumid/52601673040050129/?kind=photo&access=public&alt=json&callback=?
Note that the format we're requesting the data in is json and we need to include the callback=? option in order to avoid getting cross-site scripting errors. Calling the getJSON method with your URL and a callback function is all that remains. There are three thumbnail sizes available in the media$group object, in this example I'm using the "medium" sized image.
$j = jQuery.noConflict();
$j(document).ready(function(){
$j.getJSON([YOUR URL HERE],
function(data){
var thumbCount = 3;
var smallThumb = 0;
var mediumThumb = 1;
var largeThumb = 2;
var picsCount = data.feed.entry.length - 1;
for (var i = picsCount; i > picsCount - thumbCount; i--) {
var pic = data.feed.entry[i];
$j("").attr("src", pic.media$group.media$thumbnail[mediumThumb].url).
attr("alt", pic.summary.$t).appendTo("#pics");
}
});
});
Full source code can be found
here. Enjoy!
Subscribe