Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Facebook-style lightbox, built in jQuery
JavaScript
branch: master

This branch is 1 commit ahead, 16 commits behind defunkt:master

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

This is my fork of defunkt/facebox to reduce use of images and rely more on CSS. See it in action.

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

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. 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($) {
  $('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>

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 on my fork.

Something went wrong with that request. Please try again.