Stack is a JS library that makes a neat little slideshow of flickr photos
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Stack is an neat little JS library for displaying a slideshow of flickr photos. It makes heavy use of CSS3 for a photo “look.” See `sample.css` for one possible way to style your photos.

Install & Setup

To get Stack just clone to your javascript directory (or somewhere temporary first so you don't clutter it with this readme or the sample.css file):

git clone git://


Using Stack is pretty simple:

<div id="flickr"></div>
<script type="text/javascript">
  function jsonFlickrApi(response) {
  var stack = new Stack('flickr', { 'api_key':'01234567890123456789',
                                    'onclick':function() { stack.drop() } });

First you create a <div> that will contain your slideshow. Notice that we need to create the `jsonFlickrApi()` function here manually. I'd love to roll this into stack.js but unfortunately Flickr calls this method directly so it needs to live outside of any namespace. It's ugly, but it works. Finally, create an instance of Stack and tell it the id of the <div> you just created along with a couple of parameters.

If you prefer you can call `drop()` yourself by maybe placing a button below the stack labeled “Next.” If you want a photo to be clickable you can define the `onclick` parameter and pass any callback you'd like. In the example above we're calling `drop()` on our `stack` instance.


Stack can be customized with several options. Here they are:

  • api_key => [String] (required) your Flickr API key (see to get yours)

  • photos => [Number] (optional, defaults to 25) How many photos you want in your stack

  • user_id => [String] (optional) What user to pull photos from (see to get the user_id for a username)

  • tags => [String] (optional) List of tags to search photos for

  • text => [String] (optional) Open-ended text search, looks in a photo's title, description and tags

  • sort => [String] (optional) How to sort the returned photos (defaults to descending by date uploaded [newest photos first]). Can be one of date-posted-asc, date-posted-desc, date-taken-asc, date-taken-desc, interestingness-desc, interestingness-asc, and relevance

  • randomize => [Boolean] (optional) Should stack randomize the order of the photos regardless of `sort`

  • keep => [Number] (optional, defaults to 2) How many photos to keep on the screen before removing ones in the background (for performance, the more you have stacked the worse the animation becomes)

  • min_rotate => [Number] (optional, defaults to -5) How far (in degrees) a photo can rotate counter-clockwise

  • max_rotate => [Number] (optional, defaults to 5) How far (in degrees) a photo can rotate clockwise

  • speed => [Number] (optional, defaults to 1) How long (in seconds) it takes for a photo to fade in

  • onclick => [Function] (optional) Callback when a photo is clicked