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("", 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='" + + "'><img src='" + + "' /></a></li>");


Reference URL


  1. dream caves
    Permalink to comment#

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

  2. Derek
    Permalink to comment#

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

  3. iMaxEst
    Permalink to comment#

    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

    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. 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

  6. Graham
    Permalink to comment#

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


    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. Dagash
    Permalink to comment#

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

  8. 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?!?

    • Farah
      Permalink to comment#

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

  9. 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='” + + “‘ height=’150px’/

  10. Kiliano

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

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 triple backtick fences like this:

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

We have a pretty good* newsletter.