Frontbox, lightbox-like script

Let me introduce my new Frontbox script ... (demo here)
Again! An other lightbox-like script ! The "concept" was firstly introduced by Lokesh Dhakar, for pictures only. Then many variants appeared, with miscellaneous advantages / inconvenients ... The script ibox, retained my attention, and more recently the version 2 of thickbox. But since no solution was exactely matching my expectations (don't be surprised ), I chose to devellop my own script, I called "frontbox".

Here are advantages concerning the "frontbox" script:
+ self-contained script (does not rely on any library).
+ degrades well (nice behavior if user disable javascript)
+ truely object oriented. No conflicts with other js scripts you may add to your page ...
+ lightweight (compressed js & images & css, less than 25kb)
+ cross browser. Support win IE5,6,7rc1, firefox 1.5+, opera 9 whether on "quircks mode" or with a strict DTD ... All of these with a consistent display between browsers.
+ polyvalent: pictures, iframes, hidden divs, contents retrieved by ajax.
+ next/previous , maximize/minimize actions ...
+ Did I forget something ? Well, why not just taking a look at the demo.

How does the script work ?

Basically this work this way: take any link, put inside a span tag, with the class frontbox , and it's done .... Here's a minimal example:
<a href="mylink.htm">
- <span class="frontbox"></span>
</a>
However, for more extended use, you have to use particular attributes. Here's an example that use all attributes available :
<a href="#">
- <span class="frontbox" src="mylink.htm" name="myset" width="200" height="200" title="my life" type="ajax"></span>
</a>
Remark: These attributes are not XHTML compliant. Sorry, but I can live with this.

Description of all attributes

src: when set, this attribute will override destination of the link. When javascript is disabled, you can control where the user is directed with the regular link.
name: if you'd like to use next/previous actions, you have to specify to which "set" a "frontbox" belongs with this attribute.
width/height : whether or not the content displayed by the frontbox exceeds dimensions you've specified, you'll see or not scrollbars. Pictures are a special case, and I do not recommend to set the size for them.
title: for pictures, you might don't need to set this one. Indeed, the script will use the regular "title" attribute of the <img> tag .
type: by default, the script apply some basic rules to detect which kind of frontbox you'd like to use. If your link end with one of the extensions .jpg,.jpeg,.png,.gif then the script assume will assume that you'd like to display an image. If your link have the character # in it, then the script will assume that you want to display a hidden div. Otherwise the content is displayed inside an iframe. However you can override the "automatic" behavior, by specifying the type with one of these values: image, inline,ajax, iframe.
- Notes: inline corresponds to "hidden divs". Ajax type, must be explicitely specified.

Here's an example of hidden div, used by the script:
<a href="#honey"> <span class="frontbox"></span> </a>
<div id="honey" style="display:none" > Sweet honey, you're my chocolate. </div>

Setup of the script, etc...

You need to include three files in the header of your document, like this:
<link href="fbox_css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="fbox_conf.js"></script>
<script type="text/javascript" src="fbox_engine.compressed.js"></script>
Ensure that the files spacer.gif (used by the css) and indicator.gif ( referenced by the fbox_conf.js file) are in the right location. All strings used by the script are in the fbox_conf.js file ... (for eventual translation)
The script will work better if your page does not rely on the followings css rules:
html{height:100% }
body{height:100%}
Anyway, if you don't remark any difference with or without these css rules, then it should just be ok.

This script interests you? Click the link below.

Javascript, Please!