Lightbox Technical Overview


The Lightbox is a Fluid component intended to allow users of the Sakai Image Gallery tool to be able reorder images within a collection. It contains reusable JavaScript, the Reorderer, that is able to change the order of any arbitrary collection of DOM elements. The Lightbox can be used with both the mouse and the keyboard. To ensure we address the complex accessibility problems early, we implemented keyboard-only access first. We envision that the Lightbox will provide the groundwork for a reusable solution for direct manipulation of resources including files and folders, other media types etc. across both Sakai and uPortal.

Since the Gallery tool is written using the RSF presentation framework, our approach to start is to implement the markup-generation aspect of the Lightbox as an RSF producer. However, we expect that the Lightbox will be able to be integrated into other presentation technologies as necessary, assuming the server-side framework is able to implement a simple markup-based contract with the Lightbox.

Parts of the Lightbox

The Lightbox consists of:

The Lightbox uses the Reorderer object for all its drag-and-drop and keyboard handlers. As a result, the Lightbox is just a thin layer of markup and configuration on top of the Reorderer.

Adding Keyboard Support for Rearranging Images

The Lightbox component JavaScript is responsible for:

Refactoring the Image Gallery tool

Draft Diagram of Lightbox Structure for RSF

This diagram is a work in progress and may be completely incomprehensible as a result. (wink)

Proposed Functionality of the Lightbox

Lightbox Component Development Tasks

Building the Lightbox

Walkthrough - Building and using the Image Reorderer in Sakai

Where to Find the Code

The Lightbox is available in Fluid's source code repository .