MooPix

Your photos, your way

Another javascript slideshow?

Uh oh, another Javascript slideshow using a popular framework! Fear not — MooPix isn't a slideshow, it's a way for you to access your public Flickr photos without doing PHP, Ruby, or Python situps. What you do with it is your perrogative.

Download

Mootools 1.1+ is required for MooPix to work. It's also probably a good idea to have javascript turned on in your browser. After that, you'll want to download this:

Download MooPix

Really Excellent Questions

Flickr API? Who's-a-what-now?

It might help to understand what we're doing here. You see, Flickr allows programmers to access certain functionality from the outside. By creating an Application Programming Interface (API), Flickr has enabled all kinds of cool-kid, buzzword-compliant ways to show photos without actually, well, going to Flickr.

The problem, though, with most Flickr API Kits is that they require you to have your own server running such things as PHP, Ruby, Java, or ColdFusion... Or a copy of Flash. So what if you just want to build a simple DHTML page without server dependencies? That's where MooPix comes in. Instead of server-side code, MooPix uses Javascript to talk to Flickr in the language of JSON (Javascript Object Notation). MooPix itself basically just formats your request, creates the request, and then it's up to you to decide what to do with the response.

I've downloaded everything, now what?

First, you should open up moopix.js (Note: there might be a version number tucked in between "moopix" and ".js" if you're feeling lucky) and add your API Key where the comments tell you in the code. Don't have a Flickr API? You can apply for your own Flickr API over at Flickr.com.

Next, you'll want to create a new HTML document and include the Mootools and MooPix files in the <HEAD>. Your mileage may vary depending on where you store your Javascript files relative to your HTML document, but it should look something like this:

Okay, so what can I do?

Once you've got the right files in your HTML document, you're ready to construct a call to Flickr using MooPix. The syntax is pretty simple and allows you to make API calls to Flickr the way most server-side libraries do. For instance, let's say you want to get 30 of the most recent photos on all of Flickr that have the tag "skiing":

Another example, this time finding interesting photos:

One more, for good measure. This one finds public photos for a particular user:

What about private photo collections?

Because this script is plaintext and can be read by anyone, there's no way to grab private photos without exposing your full API credentials to the world. Which is another way of saying it works, but it's not a good idea.

What if I want to [insert feature]?

MooPix basically makes it easier to get photos from Flickr using Javascript and a little elbow grease. It won't build your site or write your next business proposal, but it just might come in handy if you've got Flickr photos you want to share your own way. What you do with all this power is up to you.

Why don't you just use PHP/Ruby/Python?

Loads of third-party Flickr tools lean on server-side scripting to broker the cross-site relationship. It's been done before (with varying degrees of completeness), so this was an opportunity to do something different. JSON lets your site talk to Flickr without requiring a web server, middleware, or database.

Why Mootools? jQuery/Prototype/YUI is better!!!

If you're looking for a Javascript holy war, you'd better look elsewhere. Mootools is just one of the many excellent alternatives for those of us too weak to roll our own Javascript framework. Mootools keeps things lean and mean... And it doesn't hurt that "moo" is fun to say.

From the folks who brought you Couloir & UptonicCreative Commons License