Flickr Photos On Demand with getFlickr

In case you don’t know it yet, Flickr is great. It is a lot of fun to upload, tag and caption photos and it is really handy to get a vast network of contacts through it.

Using Flickr photos outside of it is a bit of a problem though. There is a Flickr API, and you can get almost every page as an RSS feed, but in general it is a bit tricky to use Flickr photos inside your blog posts or web sites. You might not want to get into the whole API game or use a server side proxy script as you cannot retrieve RSS with Ajax because of the cross-domain security settings.

However, Flickr also provides an undocumented JSON output, that can be used to hack your own solutions in JavaScript without having to use a server side script.

• If you enter the URL http://flickr.com/photos/tags/panda you get to the flickr page with photos tagged “panda”.
• If you enter the URL http://api.flickr.com/services/feeds/photos_public.gne?tags=panda&format=rss_200 you get the same page as an RSS feed.
• If you enter the URL http://api.flickr.com/services/feeds/photos_public.gne?tags=panda&format=json you get a JavaScript function called jsonFlickrFeed with a parameter that contains the same data in JSON format

You can use this to easily hack together your own output by just providing a function with the same name. I wanted to make it easier for you, which is why I created the helper getFlickr for you to download and use.

getFlickr for Non-Scripters

Simply include the javascript file getflickr.js and the style getflickr.css in the head of your document:

<script type="text/javascript" src="getflickr.js"></script>
<link rel="stylesheet" href="getflickr.css" type="text/css">

Once this is done you can add links to Flickr pages anywhere in your document, and when you give them the CSS class getflickrphotos they get turned into gallery links. When a visitor clicks these links they turn into loading messages and show a “popup” gallery with the connected photos once they were loaded. As the JSON returned is very small it won’t take long. You can close the gallery, or click any of the thumbnails to view a photo. Clicking the photo makes it disappear and go back to the thumbnails.

Check out the example page and click the different gallery links to see the results.

Notice that getFlickr works with Unobtrusive JavaScript as when scripting is disabled the links still get to the photos on Flickr.

getFlickr for JavaScript Hackers

If you want to use getFlickr with your own JavaScripts you can use its main method leech():

getFlickr.leech(sTag, sCallback);

sTag

the tag you are looking for

sCallback

an optional function to call when the data was retrieved.

After you called the leech() method you have two strings to use:

getFlickr.html[sTag]

contains an HTML list (without the outer UL element) of all the images linked to the correct pages at flickr. The images are the medium size, you can easily change that by replacing _m.jpg with _s.jpg for thumbnails.

getFlickr.tags[sTag]

contains a string of all the other tags flickr users added with the tag you searched for(space separated)

You can call getFlickr.leech() several times when the page has loaded to cache several result feeds before the page gets loaded. This’ll make the photos quicker for the end user to show up. If you want to offer a form for people to search for flickr photos and display them immediately you can use the following HTML:

<form onsubmit="getFlickr.leech(document.getElementById('tag').value, 'populate');return false">
  <label for="tag">Enter Tag</label>
  <input type="text" id="tag" name="tag" />
  <input type="submit" value="energize" />
  <h3>Tags:</h3><div id="tags"></div>
  <h3>Photos:</h3><ul id="photos"></ul>
</form>

All the JavaScript you’ll need (for a basic display) is this:

function populate(){
  var tag = document.getElementById('tag').value;
  document.getElementById('photos').innerHTML = getFlickr.html[tag].replace(/_m\.jpg/g,'_s.jpg');
  document.getElementById('tags').innerHTML = getFlickr.tags[tag];
  return false;
}

Easy as pie, enjoy!

Check out the example page and try the form to see the results.