https://github.com/cannikin/stack

Stack is a JS library that makes a neat little slideshow of flickr photos
https://github.com/cannikin/stack

Last synced: about 2 months ago
JSON representation

Stack is a JS library that makes a neat little slideshow of flickr photos

• Host: GitHub
• URL: https://github.com/cannikin/stack
• Owner: cannikin
• License: mit
• Created: 2009-10-26T02:18:17.000Z (about 15 years ago)
• Default Branch: master
• Last Pushed: 2009-10-26T03:03:11.000Z (about 15 years ago)
• Last Synced: 2024-10-12T15:22:22.779Z (3 months ago)
• Language: JavaScript
• Homepage: http://ridingtheclutch.com
• Size: 74.2 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.rdoc
  • License: LICENSE

Awesome Lists containing this project

README

        
= 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:

  


  

    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() } });

  

  

First you create a 
 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 
 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 http://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 http://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