AT Web Results - MooTools Lightbox

AT Web Results - reBox! a MooTools Lightbox Alternative, very AJAX friendly!

The mission find a lightbox that plays nicely with ajax calls and has an easy method for linking to another box. The solution, surprisingly I couldnt find one I was happy with. So I built it myself. Lots of inspiratin from smoothbox! But I rewrote it from the ground up into a mootools class for super easy cusomization and so you can have multiple styles on on page, if you desire. The best part, no CSS sheet needed (*see notes below on this*). No need to know the z-idnex of elements on the page. Enough Talk, see the Demos below.


reBox! Demo(s)

Jump to: AJAX | Forms | Media | Docs | Sugar & Spice | Known Issues | FVR(s)

Demo of chained AJAX calls. the intended purpose of this script

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

3. How about a flash movie flash movie

.: Top :.


Demo of a login form with a redirect after information has been validated.
Log in to your account:

Forgot Password

.: Top :.


Look how this light box handles media content like flash and images.

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

3. How about a flash movie flash movie

4. Maybe a clickable thumbnail:
Porsche
Click to Enlarge

.: Top :.

Ok, so some notes on media... There are plenty of MooTools Light boxes and modals out there that do a great job of handling all medai types, youtube videos, flash videos, image galleries, etc. I provided a couple methods to handle flash and images, but at this time it will not do galleries etc... Rememeber thats not why I developed this, my main reason for this script is hadling multiple AJAX calls in UI design.

NOTE: Images will never take up more than 85% of the available screen height o screen width, no matter how big the images is.
Help Spread the Word

Bookmark and Share
Need some SEO?
Why spend $100's or $1,000 of dollars for SEO/AdWords that don't work or are ineffective.

All three of these products have a trial or money back gaurantee, check them out!
One Way Text Links
Long Tail Keywords
Extreme Seo Tips

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

Compatible with all of today's popular browsers, including webkit browsers such as: Google Chrome and Safari. Also this has been tested with MooTools 1.2 users of 1.1 Upgrade your depreciated unsupported scripts ;-)

AJAX Image Upload Browser compatibility
AJAX Image Upload Browser compatibility

This code is based upon the mootools documnetation as well as the great work by Uvumi and their drop down menu!




Web 2.0