ATutor is a PHP based Learning Content Management System being developed and maintained at the Adaptive Technology Resource Centre. The Photo Gallery module for ATutor was originally developed at the Garth Homer Society, in partnership with CanAssist and The University of Victoria. The module was developed as a tool that would be used with students who have developmental disabilities, providing them with an interactive way to share photos as a learning activity.
The Fluid lightBox was adapted for the module to make it possible to move and reorder images in the photo gallery. The implementation was relatively straight forward, and can be summarized in a few steps:
Lightbox Implementation in ATutor
1. Include the Fluid libraries as a subdirectory within the modules code. For now the libraries can exist as part of the module, but eventually we'll probably end up including them as part of the ATutor trunk source code, and make them available as part of the ATutor API.
2. Modify the photo gallery template that displays thumbnails. The original table layout was replaced with a single block cut from the Lightbox.html example included with Fluid. In the following case tokens are set for
TABINDEX: an integer incremented each time the block is rendered by the template engine (Smarty)
LINK: the URL to the original image
IMAGE_ALT: the Alt text for the current image
IMAGE_SRC: the URL to the thumbnail image
IMAGE_TITLE: the caption defined for the image
IMAGE_ID: The unique ID number for the image, retrieve from the gallery database
3. Add the script to initilize the lightbox into the index photo gallery page, into which the smarty templates are rendered, after the block in Step 2 that calls the template to display the thumbnails.
4. Add calls to the Fluid libraries into the photo gallery index page. In our case we've added this block into the body of the page that gets rendered when the gallery templates are render.
5. Add an "order" column to the photo gallery database table that keeps track of which images belong to which courses, and to which individual users. Initially the order field is empty, to keep compatibility with older version of the gallery. When order is not defined, the gallery displays images descending by date submitted. Order is defined the first time the user clicks "Save Image Order," a button added to the thumbnail template to implement Lightbox reordering.
7. The Form markup is modified to include the approrpriate id:
SAVE_FORM_NAME: An arbitrary name replaced when smarty renders the page
SAVE_ACTION: The URL to the script that inserts the new image order into the database, In our case this value is $_SESSION[fluid:'PHP_SELF'], the form pointing back to itself.
SAVE_STRING is the text to display on the button, retrieved from the ATutor language database.
In our case changes to image order are made by pressing the Save Image Order button inorder to minimize network traffic and hardware load whenever an image is moved, accommodating installations on older hardware and slower networks. To revert back to the Fluid default of submitting the new order each time an image is moved, the lines at the top of the gallery's index.php file can be uncommented, so each move (submit event) send the data to the server, rather than requiring a button press.
Demo ATutor Photo Gallery
A demo of the lightbox implementation of the ATutor Photo Gallery can be found on the ATutor Demo Site. Login with login name "demo" and password "demo", then click on Photo Album.
The entire source code for the ATutor Photo Gallery can be downloaded from the Modules page on ATutor.ca