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.
This page will walk you through the process of upgrading your existing 0.4 Lightbox implementation to the new 0.5 API. This tutorial assumes that
- you are already familiar with HTML, Javascript and CSS
- you are familiar with what the Lightbox 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 one file to your list: DragManager.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/ui.droppable.js jquery/jARIA.js fluid/Fluid.js fluid/DragManager.js <== new! fluid/Reorderer.js fluid/Lightbox.js |
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.lightbox(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 theselectors
option (part of theoptions
parameter)
Container
Instead of passing a string ID to fluid.createLightboxFromID()
, you can pass an ID selector to fluid.lightbox()
:
If you used to have... |
Now you would have... |
---|---|
fluid.createLightboxFromID("gallery-root"); |
fluid.lightbox("#gallery-root"); |
If you were passing a DOM element to fluid.createLightbox()
, you can pass the same element to fluid.lightbox()
:
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.lightbox(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(".orderable"); }; fluid.lightbox("#gallery", itemFn); |
var opts = { selectors: { movables: ".orderable" } }; fluid.lightbox("#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.lightbox(jQuery("body > div:first"), opts); |
var myClasses = { defaultStyle: "plain", selected: "selected", dragging: "dragging }; var opts = { styles: myClasses }; fluid.lightbox(jQuery("body > div:first"), opts); |