CSS-Tricks*

A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

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

Subscribe to The Thread

  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.

It's Your Turn

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
--- The Management ---