Fast Flickr Thumbs

FFT is a Flash file and PHP script that work together to help you create a gallery on your website, using photos from a Flickr photoset.

Currently, FFT requires the following:

  • PHP 5 or greater with SimpleXML and cURL support
  • Flash 8 on the client
  • Javascript enabled on the client

This is an early release — there's a lot of room for improvement!

Preview

You can see FFT in action at patternleaf.com, where it pulls its content from this photoset.

Or, type in a photoset id and user id to see it running with your own photos.
(Your user id and photoset id can be found in the location bar of your browser when viewing the photoset you want to use.)

User ID
Photoset ID

Quick Setup

  1. Download and unzip the latest version.
  2. Open the flickr_gateway.php file.
  3. Edit the photoset id (line 66) and user id (line 70).
  4. Put everything on your server running PHP 5 or higher.
  5. Load http://yourserver/path/fft_sample.php to see it run!

More Detail

FFT's Flash file (fft.swf) fetches a php file from your web server to discover the urls for photos to load. That php file actually outputs XML rather than HTML.

Currently, the FFT Flash file only displays thumbs — not full-size photos. When a user clicks on a thumbnail, FFT calls a Javascript function with information identifying the photo's location on Flickr's servers with respect to Flickr's url scheme.

function loadPhotoWithFlickrParams( iPhoto_id, iServer_id, iSecret )
{
	...
}
		

The savvy web author can do whatever he or she likes with this, but just in case you want a quick solution, I've also included an implementation of loadPhotoWithFlickrParams that relies on prototype to load regular-sized photos asynchronously.

The standard download includes 6 files. Two of these are the core of FFT:

  • fft.swf
    The FFT Flash file that shows thumbnails from photos listed in an XML file. You tell fft.swf which xml file to use by passing it a query string with key "photofeed" and value path to the XML file specifying photos. (The format of this file is very simple. Check the raw output of flickr_gateway.php to figure it out.)
  • flickr_gateway.php
    fft.swf queries the gateway to discover which photos to display. It provides fft.swf's "photofeed". You can actually ignore this file if you want fft.swf to show files from your own static or dynamically-generated XML photofeed, bypassing Flickr entirely.

The other files are all a sample implementation, which you can throw away or modify to suit your needs:

  • fft.js
    Has a sample implementation of loadPhotoWithFlickrParams which loads photos asynchronously via prototype.
  • fft_endpoint.php
    The file fetched by prototype's AJAX object. Just outputs a single HTML img tag.
  • prototype.js
    A version of prototype. Please visit Prototype's web page to download the latest version.
  • fft_sample.php
    The shell file that pulls everything else together.

Comments in each of the above files should provide enough information to get you going. The two core files are quite versatile. Check out the implementation at patternleaf.com to see FFT fetching EXIF data, captions, and more.

Known Limitations

FFT's thumbnail strip will only show one line of thumbnails, so if you throw a photoset at it with hundreds of photos, the little gray proxies will most likely fall off the edges of your screen and be inaccessible. When set to 600 pixels wide, FFT can show 60 or so photos.

Release Notes

Full release notes can be read here.
Notes for current version:

			
061209 version 0.11
---------------------------------------------------------------------
- Added: this release notes file.
- Fixed: a photo title containing a quote would cut off the photofeed