Sugar & Spice

---

To style the Lightbox, is simple! We have included the default {blue theme} as well as created a few others so you can see just how easy it is to create your own!

The beauty behind this light box script is it wont force you to write CSS hacks that will break your xHTML validation. We opted to use the built in power of mooTools to do all of the cross browser compatabilty that is needed to make this script work in all modern browsers.

Now with that being said you will want to include in your style sheet any css rules for the content that is returned from an AJAX call. ex. If your AJAX call brings up a <form>,<p> and <a> you will want to declare those css rules like so: (NOTE: reBoxContentId: 'rebox_content', is the default id you will be styling) so

div#rebox_content p { color:#545454; }
...

Below the following links will open a light box in alternate styles:

Vista:

---

1. Dialog Box System Warning

2. Login form Click Here to Login

2. Image Click Here to Login

Sleek Black:

---

1. A link to an image I love New York

2. A link to a large image What Browser is the best?

3. How about a flash file flash game

4. How about a flash movie flash movie

5. Maybe a clickable thumbnail:

Click to Enlarge

Default {blue theme} w/ no background:

---

1. A link to an image I love New York

2. A link to a large image What Browser is the best?

3. How about a flash file flash game

4. How about a flash movie flash movie

5. Maybe a clickable thumbnail:

Click to Enlarge

We need your help!:

---

Did you make a cool theme? Send us a link to it and get your site an incoming link as well as some web credit for your work right here. If its super cool we will include it in the download and your name will be distributed 100's of times a month.

.: Top :.

Documentation

---

Class: reBox

Syntax:
var lightbox = new reBox([options]);

Options:

// Element Attributes

link_class The class name of your links that will trigger rebox to open. Default:
rebox

form_class The class name of your forms that will trigger rebox to open. Default:
rebox

useTitle (true/false) Should the title be displayed in the rebox?
Default: true

reBoxZindex (true/false) Force a z-index level, when false will become the highest in the stack.
Default: false

useReBoxOverlay (true/false) Use an overlay(background)?
Default: true

allowedImgTags Allowed image tags for images.
Default: ["jpg","jpeg","gif","png"]

resizeTransition Mootools transition.
Default: sine:in:out

defaultReBoxWidth The default width (in pixels) if no width is declared.
Default: 300

defaultReBoxHeight The default height (in pixels) if no height is declared.
Default: 110

// Transitions and Timing Controls

ajaxDelay The amount of ms before request is triggered
Default: 500

resizeDuration The duration of the transition
Default: 500

// Element Sugar and Spice

reBoxCorners (true/false) Use HTML 5 box corners (currently only offered on Safari/FireFox)
Default: true

cornerRadius If reBoxCorners = this sets the radius in px
Default: 6

reBoxShadow (true/false) Use HTML 5 box shadow (currently only offered on Safari/FireFox)
Default: true

shadowOpacity Shadow opacity
Default: 0.99

titleFontSize Font size in px of the title
Default: 11

titleFontColor Font color of the title
Default: #ffffff

titleTextIndent Font indent of title
Default: 5

titleHeight Line height of the title
Default: 25

closeTop Positions the close button from the top
Default: 16

closeRight Position the close button from the right
Default: 16

closeH Height of close button
Default: 11

closeW Width of close button
Default: 11

reboxWindowBorderSize How thick is the border
Default: 10

reboxWindowBorderColor Border color or image uses same css syntax as "background"
Default: #777777

reboxWindowFontColor Window font color
Default: #000000

reboxWindowBGColor Window background color or image uses same css syntax as "background"
Default: #ffffff

reboxWindowOpacity Opacity of the window
Default: 1

reboxWindowFontFamily Font Family to use
Default: Verdana, Geneva, Tahoma, Arial, sans-serif

reBoxOverlayOpacity Overlay opacity
Default: .60

reBoxOverlayColor The overlay color or image uses same css syntax as "background"
Default: #000000

// Loading Block

loadTitle The title when loading
Default: Loading...

loadMessage The message displayed while loading.
Default: <p style="text-align:center;font-size:9px;padding-top:12px;margin:0px;">Loading...</p>

loadWidth The width of the window while loading.
Default: 250

loadHeight
Default: 100

// Utility Functions

windowOpen a funtion to call when the window is fully open
Default: $empty

windowClose a function to call when the window is fully closed
Default: $empty

// Image Paths

loadIcon location of the loading icon
Default: elements/spinner.gif

titleBGimage Title area background uses same css syntax as "background"
Default: #000000

closeImage Close image uses same css syntax as "background"
Default: url(elements/popup_close.png) no-repeat top left

// Element Class and ID names

reBoxOverlayId Overlay ID
Default: rebox_overlay

reBoxWindowId Window ID
Default: rebox_window

reBoxTitleWrapId Title Wrap ID
Default: rebox_title_wrap

reBoxTitleId Title ID
Default: rebox_title

reBoxCloseId Close ID
Default: rebox_close

reBoxContentId Content ID
Default: rebox_content

reBoxLoadId Load ID
Default: rebox_load

// Error Handling

ajaxErrorTitle REQUEST.HTML failure title
Default: Transport Error (404)

ajaxErrorMessage REQUEST.HTML failure title
Default: <p style="text-align:center;font-size:9px;padding-top:12px;margin:0px;">The requested file is either unavailable or does not exist, please try your request again later.</p>

ajaxErrorW Width of error window
Default: 205

ajaxErrorH Height of error window
Default: 90

sytaxErrorTitle System error title
Default: reBox Sytax Error

sytaxErrorMessage System error message
Default: <p style="font-size:9px;padding-top:12px;margin:0px 12px;">The reBox element that was clicked is missing required attributes. <br /><br />Please confirm that the <strong>url/action</strong> attribute, <strong>title</strong> attribute and <strong>tag type</strong> is either a <a> or <form> element.<br /><br />For other elements plese see the documentation for the use of <strong>reBoxForce()</strong>.</p>

syntaxErrorW System error width
Default: 325

syntaxErrorH System error height
Default: 150

formErrorTitle Form error title
Default: reBox Form Error

formErrorMessage Form error message
Default: <p style="text-align:center;font-size:9px;padding-top:12px;margin:0px;">The Selected form does not have the required ID attribute or the (x)HTML syntax is incorrect. Please correct these errors to prevent this error.</p>

formErrorW Form error width
Default: 200

formErrorH form error height
Default: 100

.: Top :.

Known Issues

---

When using the default reBoxZindex: false, if html comments (<!-- -->) are within the body tag the system will error in IE

We need your help!:

---

Did we miss something? Let us know!
Do you have mad mooTools skills? Feel like lending a helping hand? Do the community a solid and lend a hand, lets get these knocked out!

.: Top :.

Future Version Requests

---

Implement a gallery function with a carousel feature.

Smooth out the transition when scaling from a small to large lightbox

We need your help!:

---

Would you like to see another feature? Let us know!
Do you have mad mooTools skills? Feel like lending a helping hand? Do the community a solid and lend a hand, lets get these knocked out!

.: Top :.