A Web Design Community curated by Chris Coyier

Code Snippets Gallery

Code Snippets > jQuery > Show Most Recent Flickr Uploads Submit one!

Show Most Recent Flickr Uploads

This code will display the most recent uploads from Flickr for any account. Replace the “35591378@N03″ (the Whitehouse account) in the code below with the ID of the account you are fetching from. Use this if you need help finding it. Alter the “9″ in the loop to show more or less than 10.

$(document).ready(function() {
       $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=35591378@N03&format=json&jsoncallback=?", function(data) {
               var target = "#latest-flickr-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.items[i];
                       var liNumber = i + 1; // Add class to each LI (1-10)
                       $(target).append("<li class='flickr-image no-" + liNumber + "'><a title='" + pic.title + "' href='" + pic.link + "'><img src='" + pic.media.m + "' /></a></li>");
               }
       });
});

Example

Reference URL

5 Responses

  1. dream caves says:

    Very useful, i was just looking for something similar. Thank u.

  2. Derek says:

    That’s just what I was after Chris. Thanks for posting. Simple, effective.

  3. iMaxEst says:

    Exelent…
    By the way… Chris, could yuo post trick how to show my total Twitter posts since I registered it. I spent the whole day yesterday for searching, but failed.

  4. Retr0 says:

    How would you extend this with a lightbox ?

    In this snippet, the images will be loaded in after all javascript has been fired, leaving the rel=”box” not implement with the lightbox.

Leave a Comment

Remember:
  • Be nice.
  • Wrap multiline code in <pre> and <code> tags and escape it first (turn <'s into &lt;'s).
  • You may use regular HTML stuff like <a href="">, <em>, and <strong>
* This website may or may not contain any actual CSS or Tricks.