• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

• IE5+: IE 5 and above
• FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
• Opr7+: Opera 7 and above.

Description: Facebox is a lightweight Facebook-style lightbox which can display images, divs, or entire remote pages (via Ajax) inline on the page and on demand. It uses the compact jQuery library as its engine, unlike Lightbox v2.0, which uses Prototype.

Demos:

FaceBox used to display an image:

Girl listening to music

<p><a href="listenmusic.jpg" rel="facebox">Girl listening to music</a></p>

FaceBox used to display an inline DIV:

View DIV with id="mydiv" on the page

<p><a href="#mydiv" rel="facebox">View DIV with id="mydiv" on the page</a></p>

<div id="mydiv" style="display:none">
This is the contents of a hidden DIV on the page, with ID="mydiv" and style set to "display:none" <br /><a href="http://www.dynamicdrive.com">Dynamic Drive</a>
</div>

FaceBox used to display an external page (on same server) using Ajax:

View "External.htm" fetched via Ajax

<p><a href="external.htm" rel="facebox">View "External.htm" fetched via Ajax</a></p>

FaceBox used to display an external page, plus apply a CSS class to the container (to further style it):

View "External.htm" fetched via Ajax, , further styled via ".thickstyle" CSS class.

<style type="text/css">

.thickstyle{
background: silver;
}
</style>
"

<p><a href="external.htm" rel="facebox[.thickstyle]">View "External.htm" fetched via Ajax, further styled with ".thickstyle" CSS class</a></p>

Directions

Step 1: Insert the following code in the HEAD section of your page:

Note the valid doctype declaration at the very top of the code, which is required unless your page already has one defined. Facebox consists of 2 .js files, 1 .css file, plus several images that make up its interface (such as round corner images). Download facebox1.1.zip, which consists of all those files:

• facebox1.1.zip
• facebox.css
• facebox.js
• jquery-1.2.2.pack.js
• Facebox images

By default the zip file should be unzipped to the same directory as the page using Facebox (a sub directory facefiles/ is added). If you wish to create a dedicated directory for the above zip file, you'll want to open up facebox.js and edit the images references near the top to point to the correct locations afterwards. The references inside the code of Step 1 should also be updated accordingly.

Step 2: All that's left now is to define your Facebox "thumbnail" links on the page, by giving the link a rel="facebox" attribute, plus set its href attribute to point to either an image, the ID of a hidden DIV, or a URL to the page on your server, depending on the content type you wish to load. For example:

<p><a href="listenmusic.jpg" rel="facebox">Girl listening to music</a></p>

<p><a href="external.htm" rel="facebox">View "External.htm" fetched via Ajax</a></p>

See the demos at the top of the page and their corresponding HTML code for more info.

Notes

You can directly load some content into the Facebox container via scripting, instead of the conventional path of setting up a thumbnail link. The method to call is:

jQuery.facebox('Some content to show')

You can directly close the Facebox container once it's open via scripting, instead of the default path of the user clicking on the "close" button. The method to call is:

jQuery(document).trigger('close.facebox')