This space is an archive space for documentation related to old versions of Fluid Infusion (i.e. versions before 1.3). For documentation related to the latest Infusion, see Infusion Documentation.

Tutorial - Lightbox 0.5 Migration

Owned by Anastasia Cheetham
Last updated: Sept 29, 2008Version comment
2 min read

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. This tutorial assumes that

  • you are already familiar with HTML, Javascript and CSS
  • you are familiar with what the Lightbox/Image Reorderer is and does
  • you have an existing implementation of the Lightbox that worked with the 0.4 Infusion release.

Dependencies

If you use the Fluid-all.js file, you don't have to change this - this file still contains everything you need.

If, however, you are including independent files, you will need to add two files to your list: FluidDOMUtilies.js and GeometricManager.js. You also no longer need ui.droppable.js. Lightbox.js has been renamed to ImageReorderer.js.

If you have...

You will need...

 
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
On this Page
See Also
Still need help?

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

Initialization

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

Old

New

 
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 selector
    • 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():

If you used to have...

Now you would have...

 
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():

If you used to have...

Now you would have...

 
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).

If you used to have...

Now you would have...

 
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:

If you used to have...

Now you would have...

 
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);