Versions Compared

Old Version 1

changes.mady.by.user Anastasia Cheetham

Saved on

compared with

New Version 2

changes.mady.by.user Anastasia Cheetham

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Warningnote

This documentation is not correct or complete. Do not use it until this warning is removedis 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
width65%

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

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/ui.droppable.js
jquery/jARIA.js
fluid/Fluid.js
fluid/DragManager.js     <== new!
fluid/Reorderer.js
fluid/Lightbox.js
Column
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
titleOn this Page
borderStylesolid
Table of Contents
minLevel2
maxLevel5
Panel
borderColor#321137
bgColor#fff
titleBGColor#c1b7c3
titleSee Also
borderStylesolid
Panel
borderColor#321137
bgColor#fff
titleBGColor#cccccc
titleStill need help?
borderStylesolid

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

...

If you used to have...

Now you would have...

Code Block
javascript
javascript
var myClasses = {
  defaultStyle: "plain",
  selected: "selected",
  dragging: "dragging
};
var opts = {
  cssClassName: myClasses
};
fluid.lightbox(jQuery("body > oldiv:first"), opts);
Code Block
javascript
javascript
var myClasses = {
  defaultStyle: "plain",
  selected: "selected",
  dragging: "dragging
};
var opts = {
  styles: myClasses
};
fluid.lightbox(jQuery("body > oldiv:first"), opts);