Create a Photostream Using jQuery and the Flickr API

Justin Spradlin — Wed, 13 Jan 2010 02:18:04 +0000

Recently I added a Flickr photostream to the footer of the home page of this blog and I thought it would be cool to post an entry on how you can use jQuery and the Flickr API to do the same. Even if you’re not familiar with jQuery or the Flickr API it’s actually quite simple to accomplish this task.

Prerequisites

Download jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animation, and Ajax interactions for rapid web development.

Download jQuery lightBox

jQuery lightBox is a jQuery plugin that can be used to display a gallery of images on the current page using the power and flexibility of jQuery’s selectors.

Create a Flickr Account and API Key if you don’t already have them

A Flickr API key is necessary for accessing additional service features offered by Flickr.

Code Time

Let’s assume that our HTML page is as follows:

 

 
  JQuery/Flickr API Code

There are only a few important things to be aware of with this code. First we need to make sure that we include all of our style sheets and JavaScript files in the head section of our HTML page. In addition to including the jQuery and jQuery lightBox files notice that I have also created a style sheet called “style.css” and a JavaScript file called “custom.js“. We will use these files to store our custom code.

Flickr has a very extensive API that allows developers to grab images using many different techniques. For this example I have chosen to pull back images using the flickr.photos.search method. This method – among other things – allows users to grab images that have been labeled with a specific tag.

In the custom.js file we will include the following code:

$(function() {
    var apiKey = '';
    var userId = '';
    var tag = '';
    var perPage = '25';
    var showOnPage = '6';
    
    $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
        'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId + 
        '&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?', 
    function(data){
        var classShown = 'class="lightbox"';
        var classHidden = 'class="lightbox hidden"';
        
        $.each(data.photos.photo, function(i, rPhoto){
          var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
            + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;            
            
            var thumbPhotoURL = basePhotoURL + '_s.jpg';
            var mediumPhotoURL = basePhotoURL + '.jpg';
            
            var photoStringStart = ';'                
            var photoString = (i < showOnPage) ? 
                photoStringStart + classShown + photoStringEnd : 
                photoStringStart + classHidden + photoStringEnd;
                                        
            $(photoString).appendTo("#flickr");
        });
        $("a.lightbox").lightBox();
    });
});

Let’s examine the variables that are declared at the top of this JavaScript file:

apiKey – Your Flickr API key
userId – User ID of the user whose pictures you wish to grab
tag – A comma separated list of tag values
perPage – The number of images you wish to pull back (maximum: 500)
showOnPage – The number of images you wish to display on the page

Next we call jQuery’s $.getJson method passing it a custom URL and a callback method. The URL is dynamically created based on the values set in the variables mentioned above. The callback method takes the JSON object returned by Flickr and parses it to grab the relevant photo data. The JSON returned by Flickr might look something like this:

jsonFlickrApi({"photos":{"page":1, "pages":1, "perpage":25, "total":"17",
"photo":[{"id":"42626017633f", "owner":"705311402@N00", 
"secret":"2casd5d2079e", "server":"4010", "farm":5, "title":"Some Photo Title",
"ispublic":1, "isfriend":0,"isfamily":0}, {"id":"42626017633f", 
"owner":"705311402@N00", "secret":"2casd5d2079e", "server":"4008", 
"farm":5, "title":"Some Other Photo", "ispublic":1, "isfriend":0, 
"isfamily":0}, ...]}, "stat":"ok"})

Using the jQuery $.each method we can easily iterate through all of the photo elements and create the dynamic HTML needed to add the photostream to our HTML page. For each photo, we grab its relevant information (id, server location, title, etc.) and build image links with the following structure:


    _s.jpg"/>

These images will be appended to the div with the ID of “flickr” on our HTML page. The jQuery $.append method is used to accomplish this task. Notice that we end the “thumbnail” photo URLs with “_s“. This will request a small square shaped version of our image from Flickr which is perfect for display in a photostream.

Each image will have a CSS class of “lightbox” so that we can properly select all of the images to be used by the jQuery lightBox library. Notice that the callback function passed into the $.each method stores a loop counter variable called “i“. Since we only want 6 images displayed on our page at once we can use this counter variable to check the current loop position and add an additional CSS class called “hidden“” to the images not within the first 6 photos returned. These photos will be added to the page, but will not be visible to the user.

After we add all of the images to the page we call $("a.lightbox").lightBox(); to create a Lightbox for all of the images (including the hidden ones) in our photostream.

When we view the page we will see the first 6 images in our photostream.

Clicking on any of the images will launch a Lightbox and allow us to scroll through the remaining photos.

Source Code

The complete source code example for this blog entry can be downloaded by clicking here.

Justin Spradlin » JavaScript

Create a Photostream Using jQuery and the Flickr API

Prerequisites

Code Time

Source Code