Share

Introduction
So this all started because I decided to play around with the Google Ajax Feed API, integrate it with the Flickr public photo feed, and add a Mootools Image Reflection script in to the mix to spice things up a bit.

Let's start with the Google Ajax Feed API and what it offers. With the AJAX Feed API, you can download any public Atom or RSS feed using only JavaScript, so you can easily mash up feeds with your content and other APIs like the Google Maps API. If you haven't had a chance to dig into it, you should. It's relatively simple and straightforward, is very quick to set up, and runs like a champ. First, you'll need to sign your site up for a API Key here.

Now let's take a look at the Flickr Photo Feed. Flickr is one of the biggest online photo management and sharing application in the world. They offer a free full blown API, but for this project I only used their public photo feed.

Finally, the third ingredient in this melting pot is an image reflection script based on the Mootools framework. Image reflection has become much more common in the Web 2.0 design style. This script provides a code based solution to creating reflections as opposed to hand creating them in an image editor like Adobe Photoshop. If you're not sure what I mean by image reflections, stay tuned for a quick and dirty demo.

Google Ajax Feed API
To begin using the Ajax API in a page, you first need to include the javascript code from google's server in your header, passing it your API key:

<script type=\"text/javascript\" src=\"http://www.google.com/jsapi?key=[your api key here]\"></script>

Next, initialize the API by calling

google.load("feeds", "1");

Specify your callback function by calling google.setOnLoadCallback(initialize); where initialize is the name of our callback function.


Finally, let's build the initialize function, to process the Flickr public feed after the API is ready.

function initialize() {      
	// this random number is used to guarantee we aren't getting a cached copy of the feed, which by default is in JSON format
	var randomnumber=Math.floor(Math.random()*1000000);
	
	// the flickr feed url is used to instantiate a new google feed object
	var feed = new google.feeds.Feed("http://api.flickr.com/services/feeds/photos_public.gne?rand="+randomnumber);

	// The container is a DIV that contains all the photos retrieved from Flickr
	// Each time this method is called, we need to erase the previous photos
	// with a little DOM manipulation
	var container = document.getElementById("feed");
	if(container != null){
		container.parentNode.removeChild(container);				
	}
	container = document.createElement("DIV");
	container.id = "feed";
	container.innerHTML = "<p class=\'loading\'>Loading...</p>";
	document.body.appendChild(container);

	// setNumEntries allows us to specify the number of elements Google will return
	// in the feed, the default is 4
	feed.setNumEntries(20);

	// we execute the load method to tell the api to fetch our feed
	// and we pass it our callback function
	feed.load(function(result) {
            if (!result.error) {               
	  // this removes our loading message
	  container.innerHTML = "";

	  // we loop through our result set (a JSON object)
              for (var i = 0; i < result.feed.entries.length; i++) {
	       // for each entry, we create a div, assign it a css class name,
	       // create a hyperlink back to the Flickr page contain the fullsize picture
	       // and create an image node for our thumnail
                   var entry = result.feed.entries[i];			
                   var div = document.createElement("div");
                   div.className = "imageDIV";			
                   var linkNode = document.createElement("a");
                   linkNode.href = entry.link;
                   linkNode.target = "_blank";				
                   var imageNode = document.createElement("img");
                   imageNode.id = "image"+i;
	       // parseImgURL is a method I wrote to parse out the thumbnail url from a node in
	       // in the JSON object since that contained other content
                   imageNode.src = parseImgURL(entry.content);
                   imageNode.border = 0;

	       // add the hyperlink to the image	, assign it to the div, and put it on the page
                   linkNode.appendChild(imageNode);		
                   div.appendChild(linkNode);
                   container.appendChild(div);

	       // finally, this one-liner is all we need to activate the reflection
	       // feature on the image we just added to the page. The first parameter
	       // in the add method is the image id, the second parameter is used for options
	       // like the height and opacity of the reflection. 
	       // .8 results in a reflection that is 80% of the height of the original image
                   Reflection.add('image'+i, {height:.8});
              }


            }
          });
}

Flickr Photo Feed
More information on the Flickr API can be found on their website.
For this project, I chose to only use their public feed (which doesn't require an API key).

Mootools Image Reflection
This script works in all browsers supporting the canvas tag: Firefox since version 1.5, Camino, Opera since version 9 and Safari since version 1.3. It also works in Internet Explorer 5.5 and more recent by using an alternative drawing technique.

Take a look at the Demo

Sources
Google Ajax Feed API: http://code.google.com/apis/ajaxfeeds/
Flickr Photo Feed: http://www.flickr.com/services/feeds/docs/photos_public/
Mootools Image Reflection Script: http://www.digitalia.be/software/reflectionjs-for-mootools