| Note |
|---|
This is a draft tutorial. It is complete, but if you have any questions, or suggestions for improving it, please feel free to contact ~a.cheetham@utoronto.ca. |
| Section |
|---|
| Column |
|---|
| 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.
DependenciesIf 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... |
|---|
| Code Block |
|---|
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
|
| | Code Block |
|---|
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
|
|
|
| Column |
|---|
| Panel |
|---|
| borderColor | #566b30 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #D3E3C4 |
|---|
| title | On this Page |
|---|
| borderStyle | solid |
|---|
| |
| Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #c1b7c3 |
|---|
| title | See Also |
|---|
| borderStyle | solid |
|---|
| |
| Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #cccccc |
|---|
| title | Still need help? |
|---|
| borderStyle | solid |
|---|
| Join the fluid-talk mailing list and ask your questions there. |
|
|
...
Old | New |
|---|
| Code Block |
|---|
|
fluid.createLightbox(container,
itemFinderFn,
options);
|
| Code Block |
|---|
|
fluid.createLightboxFromId(containerId,
options);
|
| | Code Block |
|---|
|
fluid.imageReordererreorderImages(container, options);
|
|
The specific changes are as follows:
...
Instead of passing a string ID to fluid.createLightboxFromID(), you can pass a selector to fluid.imageReordererreorderImages():
If you used to have... | Now you would have... |
|---|
| Code Block |
|---|
|
fluid.createLightboxFromID("gallery-root");
|
| | Code Block |
|---|
|
fluid.imageReordererreorderImages("#gallery-root");
|
|
If you were passing a DOM element to fluid.createLightbox(), you can pass the same element to fluid.imageReordererreorderImages():
If you used to have... | Now you would have... |
|---|
| Code Block |
|---|
|
var rootElem = document.getElementById("gallery-root");
fluid.createLightbox(rootElem);
|
| | Code Block |
|---|
|
var rootElem = document.getElementById("gallery-root");
fluid.imageReordererreorderImages(rootElem);
|
|
Item finder function
...
If you used to have... | Now you would have... |
|---|
| Code Block |
|---|
|
var itemFn = function () {
return jQuery("#gallery > [id^=thumb-]");
};
fluid.createLightbox("#gallery", itemFn);
|
| | Code Block |
|---|
|
var opts = {
selectors: {
movables: "#gallery > [id^=thumb-]"
}
};
fluid.imageReordererreorderImages("#gallery", opts);
|
|
Options
...
If you used to have... | Now you would have... |
|---|
| Code Block |
|---|
|
var myClasses = {
defaultStyle: "plain",
selected: "selected",
dragging: "dragging
};
var opts = {
cssClassName: myClasses
};
fluid.createLightbox(jQuery("body > div:first"), opts);
|
| | Code Block |
|---|
|
var myClasses = {
defaultStyle: "plain",
selected: "selected",
dragging: "dragging
};
var opts = {
styles: myClasses
};
fluid.imageReordererreorderImages(jQuery("body > div:first"), opts);
|
|