Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Stack is a JS library that makes a neat little slideshow of flickr photos
JavaScript
tree: f5723b12a6

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
.gitignore
LICENSE
README.rdoc
sample.css
stack.js

README.rdoc

Stack

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://github.com/cannikin/stack.git

Usage

Using Stack is pretty simple:

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

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.

Parameters

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

  • api_key => [String] (required) your Flickr API key (see www.flickr.com/services/api/keys/apply/ 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 idgettr.com/ 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

Something went wrong with that request. Please try again.