Grow your CSS skills. Land your dream job.

Last updated on:

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

Comments

  1. dream caves
    Permalink to comment#

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

  2. Permalink to comment#

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

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

  10. Kiliano

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

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.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • 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".