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)
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.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("#gallery > [id^=thumb-]"); }; fluid.createLightbox("#gallery", itemFn); |
var opts = { selectors: { movables: "#gallery > [id^=thumb-]" } }; 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); |