## What is it?

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.

It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

## Why another lightbox?

Because we wanted, nay, needed a Facebook-style lightbox on FamSpam.

## Download

Requires jQuery 1.2.1.

You'll need a loading image, close label, four corners, and solid border images in addition to the javascript and css files. All are included in the tarball.

Download Facebox v1.2

Want to live on the edge? The code is kept in GitHub at http://github.com/defunkt/facebox

## Help!

Need help? Join our Google Groups mailing list.

## Images

View 'images/stairs.jpg' in the Facebox

### The Code

`<a href="images/stairs.jpg" rel="facebox">text</a>`

## Divs

View the 'info' div in the Facebox

### The Code

`<a href="#info" rel="facebox">text</a>`

## Ajaxes

View 'remote.html' in the Facebox

### The Code

`<a href="remote.html" rel="facebox">text</a>`

## Load Dependencies

Make sure jQuery is loaded before Facebox.

`<script src="jquery.js" type="text/javascript"></script>
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/facebox/facebox.js" type="text/javascript"></script>`

## Attach It onLoad

While calling `facebox()` on any anchor tag will do the trick, it's easier to give your Faceboxy links a `rel="facebox"` and hit them all onLoad.

`jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})`

## Extra Classes

You can give the facebox container an extra class (to fine-tune the display of reusable remote pages) with the `facebox[.class]` rel syntax.

Maybe your Terms and Conditions can be loaded standalone or via Facebox. When loaded in Facebox, you might want to tweak some styles -- like making the `h1` positioned absolutely? We do this on FamSpam.

View an an example which makes the `remote.html` page bigger and bolder using css.

### The Code

`<a href="remote.html" rel="facebox[.bolder]">text</a>`

## Controlling Facebox Programmatically

It's possible to attain a higher level control over Facebox by calling methods directly. The following will open the Facebox and insert the passed string into it:

### Arbitrary Text

`jQuery.facebox('something cool');
jQuery.facebox('something cool', 'my-groovy-style');`

### Remote files

`jQuery.facebox({ ajax: 'remote.html' });
jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style');`

### Image

`jQuery.facebox({ image: 'images/stairs.jpg' });
jQuery.facebox({ image: 'images/stairs.jpg' }, 'my-groovy-style');`

### A Page Element

`jQuery.facebox({ div: '#box' });
jQuery.facebox({ div: '#box' }, 'my-groovy-style');`

If you plan to fill the Facebox with the result of an Ajax call, you'll want the loading graphic displayed whilst your asynchronus task runs. This is the automatic behavior if the `facebox()` method is passed a function.

### Loading Image Displayed

`jQuery.facebox(function() {
jQuery.get('code.js', function(data) {
jQuery.facebox('<textarea>' + data + '</textarea>')
})
})`

## Thanks & Contact

Thanks to Facebook for the idea and style. Thanks to Mindy Tchieu for her help in getting this working.

Comments, concerns, complaints, criticisms, confessions? Join our Google Groups mailing list

Hey, I'm the 'info' div!

I look like this:

`<div id="info" style="display:none;">
text
</div>`