Walkthrough

This page will walk you through the process of adding the Lightbox-enabled version of the Image Gallery tool to your instance of Sakai. These instructions assume that you are familiar with Sakai tool development in general, and that you have a working Sakai installation into which you can deploy the Image Gallery Tool. (For more general information about the Lightbox API, see How to Use the Lightbox.)

1. Check out the Lightbox component

Check out the Fluid Lightbox component from https://source.fluidproject.org/svn/fluid/components/trunk into a local folder. The rest of these instructions assume you used a folder named fluid-components.

2. Run the JavaScript unit tests in your browser

The Lightbox component includes automated JsUnit tests (JsUnit 2.2 itself is, in fact, included in the distribution).

1. In a web browser, open the JSUnit test runner file:

   /fluid-components/src/webapp/component-templates/test/jsunit/testRunner.html
   

2. In the filename field near the top of the page, browse for the file:

   /fluid-components/src/webapp/component-templates/test/tests/AllTests.html
   

3. Click 'Run'

NOTE: These tests work in:

• Firefox on Windows XP and Mac OS 10.4.

These tests run but some do NOT pass in:

• Safari
• Internet Explorer on Windows

3. Preview the Lightbox template in your browser

 You can also view the Lightbox component in your browser by viewing it from your local file system.

1. Open the Lightbox.html file in your browser. i.e. fluid-components/src/webapp/component-templates/html/Lightbox.html.
2. Tab until focus is on the image collection itself.
3. To select the image to be moved:
   • Use the left and right arrow keys to move focus to the image you wish to move.
4. To move the selected image:
   • Hold down the Control key and use the left and right arrow keys to move the selected image.
5. When the image is in the desired location, release the Control key.

4. Build and install the Lightbox component

Go to the fluid-components directory created Step 1 above and install the Lightbox component using

mvn install

This will place a copy of the fluid-components war file in your local maven repository.

5. Check out the Lightbox-enabled Image Gallery tool

Check out the Fluid version of the Image Gallery Tool from https://source.sakaiproject.org/contrib/ucb/image-gallery/trunk/ into a folder called in your Sakai source hierarchy. The rest of these instructions assume you used a folder called gallery.

6. Build and deploy the Image Gallery tool

If your instance of Sakai is currently running, shut it down.

Go to the gallery directory and deploy the Image Gallery Tool using

mvn -Dmaven.tomcat.home=$CATALINA_HOME install sakai:deploy

(assuming your $CATALINA_HOME environment variable is set; otherwise, replace it with the appropriate path).

This step depends on the fluid-components .war file generated in step 4.

7. Restart Sakai, and marvel at how wicked the Lightbox is

These instructions assumes you are familiar with the Image Gallery Tool, and have already uploaded images and created Gallery collection folders with images in them. If not, visit the Image Gallery page on the Sakai wiki to learn more.

1. Start Sakai
2. Navigate to your collection folder in the Gallery tool.
3. Tab until focus is on the image collection itself. This will happen after the tool iframe has focus.
4. To select the image to be moved:
   • Use the left and right arrow keys to move focus to the image you wish to move.
5. To move the selected image:
   • Hold down the Control key and use the left and right arrow keys to move the selected image.
6. When the image is in the desired location, release the Control key.