Gallery Scroller
================

A small javascript library for creating a scrolling gallery of non-uniform content.

Requires:
Prototype
Scriptaculous effects.js


Usage
=====

new GalleryScroller('gallery_container', 'gallery_previous', 'gallery_next', 11)

'gallery_container' is the div that holds the gallery items.
'gallery_previous' is the id of the previous button.
'gallery_next' is the id of the next button.
11 is the entry to center the scoller on when loaded [optional]

Here is the HTML of the gallery:

<div id="gallery_mask">
  <div id="gallery_container">
    <img src="foo.jpg"/>
    <img src="bar.jpg"/>
    <img src="baz.jpg"/>
  </div>
</div>

and the accompanying CSS:

#gallery_mask { position:relative; height:160px; width:700px; overflow:hidden; clear:left; border:1px black dotted;}
#gallery_container { position:relative; padding:10px; height:150px; width:540px; }

The gallery_container acts like a filmstrip and the gallery_mask acts like a 
window onto the filmstrip.
Take special notice that on #gallery_mask overflow:hidden is set.  This "masks" 
out the parts of the filmstrip that aren't shown.  The mask will need a specific
width set.

We're using empty spans for the buttons but there's no reason they can't be divs:

<div>
  <span id="gallery_previous"></span>
  <span id="gallery_next"></span>
</div>

and the accompanying CSS:

#gallery_previous { width: 19px; height: 19px; float:left; background:url(/images/arrow-left-disabled.gif); 
border-right: 1px #ddd solid; }
#gallery_next { width: 19px; height: 19px; float:right; background:url(/images/arrow-right-disabled.gif); }
#gallery_previous.active { cursor:pointer; background:url(arrow-left.gif); }
#gallery_next.active { cursor:pointer; background:url(arrow-right.gif); }

We're using background urls for the button images.  The GalleryScroller javascript
will add or remove the 'active' class on each image depending on their state.
A button is 'active' only when it can be pressed; when there's more gallery to
see in that direction.

See the example in the test directory for more details on how the widget works.


Future Possibilities
====================
Ajaxifiy so the entire gallery doesn't have to be pulled down on page load.


Enjoy!

Copyright (c) 2008 Los Angeles Times, released under the MIT license