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