In version 0.5, the Lightbox has been renamed the Image Reorderer, and its API has been simplified. This page will walk you through the process of upgrading your existing 0.4 Lightbox implementation to the new 0.5 Image Reorderer API.

Lightbox 0.5 Migration

 In version 0.5, the Lightbox has been renamed the Image Reorderer, and its API has been simplified. This page will walk you through the process of upgrading your existing 0.4 Lightbox implementation to the new 0.5 Image Reorderer API.

						jquery/jquery-1.2.6.js
						jquery/jquery.keyboard-a11y.js
						jquery/ui.core.js
						jquery/ui.draggable.js
						jquery/ui.droppable.js
						jquery/jARIA.js
						fluid/Fluid.js
						fluid/Reorderer.js
						fluid/Lightbox.js
						

						jquery/jquery-1.2.6.js
						jquery/jquery.keyboard-a11y.js
						jquery/ui.core.js
						jquery/ui.draggable.js
						jquery/jARIA.js
						fluid/Fluid.js
						fluid/FluidDOMUtilies.js     <== new!
						fluid/GeometricManager.js    <== new!
						fluid/Reorderer.js
						fluid/ImageReorderer.js <== formerly Lightbox.js
						

Initialization

The function that initializes a Lightbox has been renamed, and significantly simplified:

			fluid.createLightbox(container,
			itemFinderFn,
			options);
			

			fluid.createLightboxFromId(containerId,
			options);
			

			fluid.reorderImages(container, options);
			

The specific changes are as follows:

• the container parameter can now be
  • a CSS-based 
  • a single-element jQuery object, or
  • a DOM element
• the identification of orderable thumbnails, previously specified by the itemFinderFn parameter, is now specified through the selectors option (part of the options parameter)

The following sections discuss each of these changes.

Container

Instead of passing a string ID to fluid.createLightboxFromID(), you can pass a selector to fluid.reorderImages():

			fluid.createLightboxFromID("gallery-root");
			

			fluid.reorderImages("#gallery-root");
			

If you were passing a DOM element to fluid.createLightbox(), you can pass the same element to fluid.reorderImages():

			var rootElem = document.getElementById("gallery-root");
			fluid.createLightbox(rootElem);
			

			var rootElem = document.getElementById("gallery-root");
			fluid.reorderImages(rootElem);
			

Item finder function

Instead of passing in a function that returns a set of thumbnails, the orderable thumbnails are identified through selectors that are specified using the selectors option (part of the options parameter).

			var itemFn = function () {
			return jQuery("#gallery > [id^=thumb-]");
			};
			fluid.createLightbox("#gallery", itemFn);
			

			var opts = {
			selectors: {
			movables: "#gallery > [id^=thumb-]"
			}
			};
			fluid.reorderImages("#gallery", opts);
			

Options

Other changes have been made to the format of the options object:

cssClassNames

The cssClassNames option has been renamed to styles:

			var myClasses = {
			defaultStyle: "plain",
			selected: "selected",
			dragging: "dragging
			};
			var opts = {
			cssClassName: myClasses
			};
			fluid.createLightbox(jQuery("body > div:first"), opts);
			

			var myClasses = {
			defaultStyle: "plain",
			selected: "selected",
			dragging: "dragging
			};
			var opts = {
			styles: myClasses
			};
			fluid.reorderImages(jQuery("body > div:first"), opts);