This documentation refers to the trunk version of the Lightbox code. For documentation specific to the v0.4 release, please see Lightbox API - v0.4. Initializing the Lightbox The Lightbox initialization function must be called either in a dom ready function or a body.onLoad function: fluid.lightbox (container[, options]); Parameters container The container parameter is a CSS-based selector, single-element jQuery object, or DOM element specifying the root node of the Reorderer. options The options parameter is an optional collection of name-value pairs that configure the Lightbox:

On This Page Initializing the Lightbox Parameters container options Customizing the Lightbox Configuring the Lightbox Container Configuring the Thumbnails Styling the Lightbox Dependencies See Also Integrating the Reorderer Reorderer API GridLayoutHandler API Walkthrough - Building and using the Lightbox in Sakai Still need help? Join the fluid-talk mailing list and ask your questions there.

Selectors

selectors: {
    movables: ".movables",
    grabHandle: ""
}

General options

mergePolicy: {
    "selectors.selectables": "selectors.movables",
    "selectors.dropTargets": "selectors.movables",
    keysets: "replace"
}

styles: {
    defaultStyle: "orderable-default",
    selected: "orderable-selected",
    dragging: "orderable-dragging",
    mouseDrag: "orderable-dragging",
    hover: "orderable-hover",
    dropMarker: "orderable-drop-marker",
    avatar: "orderable-avatar"
};

fluid.defaultKeysets = [{
    modifier : function (evt) {
        return evt.ctrlKey;
    },
    up : fluid.keys.UP,
    down : fluid.keys.DOWN,
    right : fluid.keys.RIGHT,
    left : fluid.keys.LEFT
},
{
    modifier : function (evt) {
        return evt.ctrlKey;
    },
    up : fluid.keys.i,
    down : fluid.keys.m,
    right : fluid.keys.k,
    left : fluid.keys.j
}];

function () {};

Customizing the Lightbox

The Lightbox is a container of thumbnail images. The Fluid library includes an HTML template file, but if you wish to create your own template, the container and the thumbnail images must be configured as follows:

Configuring the Lightbox Container

• The container element must be a <div> element, and it must have a unique ID.
• To use the default order-changed callback, the container element must be contained within a <form> element. The form will be submitted to the server to communicate changes in the thumbnails' order.

Configuring the Thumbnails

• Thumbnails must be <div> elements.
• Thumbnail <div> elements must be marked with an ID that is of the form:
     containerId + "lightbox-cell:" + index + ":"
  where
     containerId is the ID of the container of the orderables, i.e. the root node of the Lightbox,
     index is any number of digits, indicating the current index of the orderable item.
• To use the default order-changed callback, each orderable element must have a hidden <input> element associated with it, used to communicate changes to the thumbnails' order back to the server. The input element must have
  • a name
  • a value that is the index
  • an ID of the form:   containerId + "lightbox-cell:" + index + ":reorder-index"

Styling the Lightbox

The Lightbox includes CSS styles that it applies to the thumbnails. The application of styles is based on known class names. The class names are:

   orderable-default - This class is applied to thumbnail <div> elements in their default state.
   orderable-selected - This class is applied to the thumbnail that has been selected. The selected thumbnail item can be moved using keystrokes.
   orderable-hover - This class is applied to thumbnails when the mouse hovers over them.
   orderable-dragging - This class is applied to the thumbnail that is currently being moved.
   orderable-avatar - This class is applied to the avatar, the image of the thumbnail as it is being dragged about by the mouse.
   orderable-drop-marker - This class is applied to the drop target indicator when the mouse is used to drag a thumbnail.

Dependencies

The Lightbox dependencies can be met by including the minified Fluid-all.js file in the header of the HTML file:

<script type="text/javascript" src="Fluid-all.js"></script>

Alternatively, the individual file requirements are:

<script type="text/javascript" src="jquery/jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery/jARIA.js"></script>
<script type="text/javascript" src="jquery/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="jquery/ui.core.js"></script>
<script type="text/javascript" src="jquery/ui.draggable.js"></script>
<script type="text/javascript" src="jquery/ui.droppable.js"></script>
<script type="text/javascript" src="fluid/Fluid.js"></script>
<script type="text/javascript" src="fluid/Reorderer.js"></script>
<script type="text/javascript" src="fluid/DragManager.js"></script>
<script type="text/javascript" src="fluid/Lightbox.js"></script>