Skip to content


Subversion checkout URL

You can clone with
Download ZIP

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


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

See it in action.

Sample Image

Download the latest release


This release relies on a lot of advanced CSS techniques (box-shadow, border-radius, RGBA). That being said, it's compatible with many browsers.

  • Safari 4
  • Webkit Nightlies (Chromium, Chrome) as of 4/17/10
  • Firefox 3.5
  • IE8 (degraded experience)
  • IE7 (degraded experience)
  • IE6 - I just don't care
  • Opera - I just don't care


Include jQuery, src/facebox.js and src/facebox.css. Then tell facebox where you've put src/loading.gif and src/closelabel.png

$.facebox.settings.closeImage = '/images/facebox/closelabel.png'
$.facebox.settings.loadingImage = '/images/facebox/loading.gif'

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 onDomReady.

jQuery(document).ready(function($) {

Any anchor links with rel="facebox" with now automatically use facebox:

<a href="#terms" rel="facebox">Terms</a>
  Loads the #terms div in the box

<a href="terms.html" rel="facebox">Terms</a>
  Loads the terms.html page in the box

<a href="terms.png" rel="facebox">Terms</a>
  Loads the terms.png image in the box

Using facebox programmatically

jQuery.facebox('some html')
jQuery.facebox('some html', 'my-groovy-style')

The above will open a facebox with "some html" as the content.

jQuery.facebox(function($) {
  $.get('blah.html', function(data) { $.facebox(data) })

The above will show a loading screen before the passed function is called, allowing for a better ajaxy experience.

The facebox function can also display an ajax page, an image, or the contents of a div:

jQuery.facebox({ ajax: 'remote.html' })
jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style')
jQuery.facebox({ image: 'stairs.jpg' })
jQuery.facebox({ image: 'stairs.jpg' }, 'my-groovy-style')
jQuery.facebox({ div: '#box' })
jQuery.facebox({ div: '#box' }, 'my-groovy-style')


Want to close the facebox? Trigger the close.facebox document event:


Facebox also has a bunch of other hooks:

  • loading.facebox
  • beforeReveal.facebox
  • reveal.facebox (aliased as afterReveal.facebox)
  • init.facebox

Simply bind a function to any of these hooks:

$(document).bind('reveal.facebox', function() { ...stuff to do after the facebox and contents are revealed... })


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

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

Contact & Help

If you have questions, feel free to ask on the Google Groups Mailing List. Alternatively if you find a bug, you can open an issue.

Something went wrong with that request. Please try again.