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() {
	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='" +$description.$t + "' href='" +$content[0].url + "'><img src='" +$thumbnail[thumbSize].url + "' /></a></li>");


Reference URL


  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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".