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

Comments

  1. User Avatar
    dream caves
    Permalink to comment#

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

  2. User Avatar
    Derek
    Permalink to comment#

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

  3. User Avatar
    iMaxEst
    Permalink to comment#

    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. User Avatar
    Retr0

    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.

  5. User Avatar
    George Gecewicz
    Permalink to comment#

    Hey guys, I actually made a little WordPress widget based on this code. It’s pretty cool, you can check it out if you’d like here http://wordpress.org/extend/plugins/hey-its-a-flickr-widget/

  6. User Avatar
    Graham
    Permalink to comment#

    Looks like a lot of people are running into this problem:

    Microsoft-Windows-Vista

    This is the user that comes up when we try out this technique with our own flickr user id’s.
    Anyone know how to fix this??

  7. User Avatar
    Dagash
    Permalink to comment#

    thank u CHRIS ,,, i was looking for this since about 3 days ..

  8. User Avatar
    Christian
    Permalink to comment#

    Hey I am struggling with styling the ul. I have some images that are vertical and some that are horizontal. How do i get them all to be a standard size so i can have a clean looking 5 columns 2 row list. Can someone help me with this?!?

    • User Avatar
      Farah
      Permalink to comment#

      Sorry couldn’t figure out how to reply directly to your comment but check out my comment underneath

  9. User Avatar
    Farah
    Permalink to comment#

    @Christian I don’t really know anything about javascript but I added height=’100px’ to the img tag and it worked (or whatever height you want really)

    like this:

    img src='” + pic.media.m + “‘ height=’150px’/

  10. User Avatar
    Kiliano

    Ow! Thank you! You safe many hours of my job =)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag