16.10. Using jQuery and JSONP

16.10.1. Problem

You want to consume a list of photos from Flickr’s public photo stream and display the first three images.

16.10.2. Solution

(function($) {
    $(document).ready(function() {
        var url     = 'http://www.flickr.com/services/feeds/photos_public.gne?
jsoncallback=?';
        var params  = { format: 'json' };
        $.getJSON(url, params, function(json) {
            if ( json.items ) {
                $.each( json.items, function(i, n) {
                    var item = json.items[i];
                    $('<a href="' + item.link + '"></a>')
                        .append('<img src="' + item.media.m + '" />')
                        .appendTo('#photos');
                    // Display the first 3 photos (returning false will
                    // Exit the loop
                    return i < 2;
                });
            }
        });
    });
})(jQuery);