Automatic Flickr Linking

14th of May 2008

Quite a few people ask me about using the flickr api to pull in photos to show on their website. So while waiting on a never ending test suite to finish I put together a quick script. This isnt useful mean for a portfolio gallery or such, just a handy script for forums / blogs.

The code simply looks through the current page for links to a flickr users "tags", then grabs the photos from flickr, and places the thumbnails on the page. I used the jquery lightbox plugin to display the photos, but its easily replaced. 

// This script checks the page for any links to a flickr
// users tags page, for example
// http://flickr.com/photos/user/tags/tagname/
// it then fetches the users photos with those tags
// and puts thumbnails on the page, and 'lightboxes' them

// Replace this with your own api key, which you can get from
// http://www.flickr.com/services/api/keys/apply/
var api_key    = "*********************************";

// Set this to the maximum number of photos to show, 
// -1 for no limit
var num_photos = -1;

var api_url    = "http://api.flickr.com/services/rest/?method=";               
var json       = "&format=json&jsoncallback=?";

// Grab links that point to flickr
$("a[href^=http://www.flickr.com/],"
  + "a[href^=http://flickr.com/]").each(function()
{
  var split_url = $(this).attr("href").split("/");
  var link = this;
  var tag  = split_url[6];
    
  if(split_url.length > 6 && split_url[5] == "tags")
  {               
    var gallery = $("<div class='flickr_set' />").insertAfter($(link));
        
    // Looks up the user_id from the url to flickr
    var lookup_url = api_url+"flickr.urls.lookupUser&api_key="
      + api_key + "&url=" + this + json;

    $.getJSON(lookup_url, function(data)
    {                           
      var search_url = api_url+"flickr.photos.search&api_key="+api_key
        + "&user_id="+data.user.id+"&tags="+tag+json;

      $.getJSON(search_url, function(data)
      {  
        $.each(data.photos.photo, function(i,item) 
        {
          var image_url = "http://farm"+item.farm+".static.flickr.com/"
            +item.server+"/"+item.id+"_"+item.secret;
    
          gallery.append($("<a href='"+image_url+".jpg' title='"
            + item.title+"'>"+"<img src=\""+image_url+"_s.jpg\""
            + "alt=\""+item.title+"\" /></a>"));
                        
            if(num_photos != -1 && (num_photos-1) == i)
              return false;
        });
                
        gallery.children("a").lightBox();
        gallery.append($("<br />")).append(link);
      });
    });
  }
});

So thats the code, to use it just link to flickr like so : original link text you can download the script + images + css from here

The flickr api is one that I really like using, its flexible request type support, along with its impressive documentation and API Explorer make it very easy to use. JQuery helps make '5 minutes' scripts actually take 5 minutes to finish. I really do wish javascript supported printf natively though,

Comments

There has been no comments


Post a Comment

Name :
Url :
Comment :
html is enabled, you may post links / images and basic formatting, styling is permitted.
The colour of grass is :
Simple check against spamming robots