When I re-built this portfolio I decided I also wanted to get on the Flickr bandwagon. I like to think I have an interesting array of photos and also it gave me an excuse to play with the Flickr API. It’s probably worth noting that the world isn’t short of MooTools Flickr plugins (Request.Flickr & MooFlick to name just two) so why bother writing my own? The simple answer being that I didn’t want to cop out and use someone else’s code on my own portfolio. It feels a bit cheap. So, you’re welcome to use this class if you need some Flickr action, and I will briefly detail using it.

Say hello to Flicker

Genius name no?

Before going any further it’s probably a good idea that I provide a link to the files which can be found on GitHub. Got em? Good.

Using the Flicker class is pretty easy, you just need an element to contain the photos and your user ID:

new Flicker( $('container'), '41265688@N02', { /* options */ } ).getPhotos();

Once you call getPhotos a request to the Flickr service will be made you will get a list of the latest photos from your photostream. This will also work with any other username, it doesn’t have to be yours.

I like options

I’ll simply list the default options object from the source as it has self-explanatory comments and it would be a bit pointless of me to re-write them:

options : {
    num : 6,

    // Type of element to contain each photo
    element : 'li', 

    // Attached to each containing element
    className : 'flickr-photo', 		

    /*
	Size of images to return:
	_s = 80x80
	_t = 100x75
	_m = 240x180
	'' (empty string) = 500x375
    */
    imgType : '_m',
    random : false,

    // Callback passed array of photo elements
    onImagesReady : function( elements ) {

	elements.fade('hide').inject( $(this) );
	    elements.fade('in');

	}
    }

That’s pretty much it for the Flicker class, but what about loading images from a specific set?

Flicker.Set

You will need a few more details to be able to load photos from a specific set. As well as a user ID you will also need the set ID and request an API key from Flickr.

Ensure you have both the Flicker and Flicker.Set classes on your page and just pass the extra arguments:

new Flicker.Set( $('container'), '41265688@N02',  '72157626037018637', 'xxxx API Key' ).getPhotos();

As well as the options provided by Flicker, there are a few changes to handle a set:

        // Additional data to request from Flickr API
	// http://www.flickr.com/services/api/flickr.photosets.getPhotos.html
	extras : 'date_taken,url_sq,url_m',
	photosetLinkText : 'View this set on Flickr',
	photosetLinkPos : 'after'

I’ve only listed the ones you’re likely to change.

With all that in place you should now be seeing a list of images from your chosen Flickr set. Easy!

Taking it further

If you check out the source of this blog’s home page you can see my usage of the Flicker class. You will also notice that I’m actually calling a class called Photoset.

To add the additional functionality (shuffle, Highslide pop-ups) I extended Flicker.Set; creating a nice structure of MooTools classes.

I’ll leave you to play about with it.