Lightbox API - v0.3

options

The options parameter is an optional collection of name-value pairs that configure the Lightbox:

Name	Description	Values	Default

Name	Description	Values	Default
`orderChangedCallback`	A function to be called each time the order of items has changed, to communicate the new order to the server.		A function (created by invoking `fluid.defaultOrderchangedCallback(container)`) that uses a form with hidden `<input>` elements to track order changes.
`keysets`	an object containing sets of keycodes to use for directional navigation, and for the modifier key used for moving a movable item.	The object must be a list of objects containing the following keys: `modifier` : a function that returns `true` or `false`, indicating whether or not the required modifier(s) are activated `up` `down` `right` `left`	`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 }];`
`cssClassNames`	an object containing class names for styling the Reorderer. See below for a discussion of CSS styling of the Reorderer	The object must contain the following keys: `defaultStyle` This class is applied to orderable elements in their default state. `selected` This class is applied to the orderable element that has been selected. The selected orderable item can be moved using keystrokes. `dragging` This class is applied to the orderable element that is currently being moved. `hover` This class is applied to orderable elements when the mouse hovers over them. `dropMarker` This class is applied to the drop target indicator when the mouse is used to drag an item. `avatar` This class is applied to the avatar, the image of the orderable element as it is being dragged about by the mouse.	`var defaultCssClassNames = { defaultStyle: "orderable-default", selected: "orderable-selected", dragging: "orderable-dragging", hover: "orderable-hover", dropMarker: "orderable-drop-marker", avatar: "orderable-avatar" };`
`avatarCreator`	a function that returns a valid DOM node to be used as the dragging avatar		The item being dragged will be cloned
`instructionMessageId`	The id of the DOM element containing instructional text for Lightbox users		"message-bundle:"

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 orderable image thumbnails must be contained within a containing <div> element with a known "id" attribute. This ID is passed to the Lightbox upon instantiation.
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

You can either include all the dependencies individually in the markup or just include the Fluid-all.js file.

The dependencies are:

css/Lightbox.css
js/jquery/jquery-1.2.3.js
js/jquery/jquery.keyboard-a11y.js
js/jquery/jquery.dimensions.js
js/jquery/ui.base.js
js/jquery/ui.draggable.js
js/jquery/ui.droppable.js
js/jquery/jARIA.js
js/fluid/Fluid.js
js/fluid/Reorderer.js
js/fluid/Lightbox.js