Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Show Most Recent Picasaweb Uploads

Replace the "tester" username below with your own, and the target value with the selector of the element you wish to append the pictures to.

$(document).ready(function() {
	$.getJSON("http://picasaweb.google.com/data/feed/base/user/tester/?kind=photo&access=public&alt=json&callback=?",
	function(data) {
		var target = "#latest-picasaweb-images ul"; // Where is it going?
		for (i = 0; i <= 9; i = i + 1) { // Loop through the 10 most recent, [0-9]
			var pic = data.feed.entry[i].media$group;
			var liNumber = i + 1; // Add class to each LI (1-10)
			var thumbSize = 0; // Size of thumbnail - 0=small 1=medium 2=large
			$(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>");
		}
	});
});

Example

Reference URL

Comments

  1. Permalink to comment#

    Since writing and using this for a while, I’ve noticed that it doesn’t exactly fetch the Absolutely latest images, more like representative images, like 1 of the 5 you uploaded at once last.

    But it’s the same thing with their rss-feed, so I guess it’s a Google-thing in general, and who could blame them. No way no how they could keep absolutely accurate Live feeds for every photo at once…

  2. Permalink to comment#

    If you want to show how many images you have, try this:

    // Assumes you have the json feed for your entire account, and not just a specific folder - I guess if you use that you'll get the amount in your folder, but I'm just guessing
    
    $.append("I have " + data.feed.openSearch$totalResults.$t + " photos online!");
    

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```