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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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