/
Lightbox Technical Overview

Lightbox Technical Overview

Sept 29, 2008

Lightbox Technical Overview

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:

  • A Lightbox HTML page, which provides an example of the HTML required to display an image thumbnail. This page can be used by developers in a server-side presentation framework of choice to generate the required markup as appropiate. Lightbox.html also serves double-duty as a working RSF template for the Lightbox.
  • The LightboxProducer, an RSF-based Java class responsible for producing the necessary markup to serve up a working Lightbox to the client. The LightboxProducer contains a and ThumbProducer, to which it delegates responsibility for actually doing the work of dynamic markup generation.
  • The ThumbProducer, which generates the appropriate thumbnail markup in RSF-based applications.

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:

  • Moving focus between images using the arrow keys
  • Actually changing the order of images using the arrow keys with the Ctrl modifier
  • Handling the up and down arrow keys for navigation vertically within the image grid is more complex, requiring an algorithm (stubbed out in the GridLayoutHandler) to determine location of images onscreen.

Refactoring the Image Gallery tool

  • The Lightbox is a stand-alone JavaScript file that is able to reorder arbitrary DOM elements contained within an element with a known id.
  • We've made small modifications to hook the Lightbox up to the existing Gallery template
    • Created an evolver (LightboxProducer) and separate ViewProducer (ThumbProducer) that generates the markup for the image thumbnails
  • Added support in the Gallery for persisting the order of images in the database.
  • Provided a way to POST the image from the Lightbox component to the Gallery tool on the server.

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 .