Child pages
  • Walkthrough - Building and using the Image Reorderer in Sakai

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Section
Column
width50%

Walkthrough

This page will walk you through the process of adding the LightboxImage Reorderer-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 Image Reorderer API, see Image Reorderer API.)

1. Check out the Image Reorderer component

Check out the Fluid Image Reorderer 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.

Column
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
titleOn This Page
borderStylesolid
Table of Contents
minLevel2
maxLevel5
Panel
borderColor#321137
bgColor#fff
titleBGColor#cccccc
titleStill need help?
borderStylesolid

Join the fluid-talk mailing list and ask your questions there.

...

  1. In a web browser, open the Lightbox Image Reorderer test file and the tests will run automatically:
    Code Block
    /fluid-components/src/webapp/tests/fluid-tests/ImageReorderer-test.html
    

...

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

  1. Open the Lightboximage-reorderer.html file in your browser. i.e. fluid-components/src/webapp/fluid-components/html/Lightboximage-reorderer.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.

...