Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Facebook-style lightbox, built in jQuery
JavaScript
Branch: no-images
Pull request Compare This branch is even with defunkt:no-images.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
examples
lib
src
.gitignore
LICENSE
README.md

README.md

Facebox

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

Compatibility

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

Usage

Include jQuery, src/facebox.js and src/facebox.css.

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

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

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')

Events

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

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

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... })

Customization

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>

You can also use Facebox with acustom loading graphic:

$.facebox.settings.loadingImage = '/images/ajax/loading.gif'

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.