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
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
containerparameter can now bea CSS-based selector
a single-element jQuery object, or
a DOM element
the identification of orderable thumbnails, previously specified by the
itemFinderFnparameter, is now specified through theselectorsoption (part of theoptionsparameter)
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);
|