• Stars
    star
    1,928
  • Rank 24,031 (Top 0.5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 16 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Facebook-style lightbox, built in jQuery

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. 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
  • afterClose.facebox (callback after closing 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.

More Repositories

1

jquery-pjax

pushState + ajax = pjax
JavaScript
16,740
star
2

gist

Potentially the best command line gister.
Ruby
3,805
star
3

dotjs

~/.js
Ruby
3,161
star
4

unicorn

Unofficial Unicorn Mirror.
Ruby
1,410
star
5

pystache

Mustache in Python
Python
1,308
star
6

github-gem

`github` command line helper for simplifying your GitHub experience.
Ruby
1,123
star
7

cijoe

CI Joe is a fun Continuous Integration server. Unmaintained.
Ruby
1,046
star
8

coffee-mode

Emacs Major Mode for CoffeeScript
Emacs Lisp
574
star
9

gist.el

Yet another Emacs paste mode, this one for Gist.
Emacs Lisp
548
star
10

hurl

Hurl makes HTTP requests.
JavaScript
529
star
11

rip

Take back your $LOAD_PATH. Deprecated and unmaintained.
Ruby
363
star
12

repl

Sometimes you need a REPL. Unmaintained, sorry.
Ruby
360
star
13

textmate.el

Basic emulation of awesome TextMate features for Emacs.
Emacs Lisp
356
star
14

colored

Colors in your terminal. Unmaintained.
Ruby
270
star
15

cache_fu

Ghost from Christmas past. Unmaintained.
Ruby
257
star
16

exception_logger

Unmaintained. Sorry.
Ruby
242
star
17

cheat

Cheating is fun!
Ruby
239
star
18

Zen

Distraction free writing for Atom.
CoffeeScript
193
star
19

emacs

My Emacs config
Emacs Lisp
187
star
20

choice

Choice is a gem for defining and parsing command line options with a friendly DSL.
Ruby
176
star
21

ambition

include Enumerable — Unmaintained
Ruby
165
star
22

markdown-mode

Emacs Markdown mode
Emacs Lisp
155
star
23

lyndon

Lyndon wraps JavaScript in a loving MacRuby embrace. A fun hack that is no longer maintained.
Ruby
145
star
24

nginx_config_generator

Generates nginx config files from YAML.
Ruby
125
star
25

acts_as_textiled

Makes your models act as textiled.
Ruby
115
star
26

resque-lock

A Resque plugin for ensuring only one instance of your job is running at a time.
Ruby
113
star
27

mofo

Mofo was a fast and simple microformat parser, based on a concise DSL and Hpricot. No longer maintained.
JavaScript
91
star
28

gem-man

RubyGems plugin to view a gem's manpage.
Ruby
85
star
29

quake

The source code to Quake, one of the best games ever.
79
star
30

mustache-sinatra-example

An example of using Mustache in a Sinatra app.
Ruby
79
star
31

defunkt.github.com

My GitHub Page
HTML
78
star
32

sake

System wide Rake.
Ruby
76
star
33

starling

Ruby
74
star
34

resque

Moved to resque/resque
57
star
35

ircamp

IRC <-> Campfire Bridge
Python
54
star
36

evilbot

an evil bot that's definitely not for convore
CoffeeScript
50
star
37

jasper

Lispy JavaScript
JavaScript
40
star
38

gibberish

Dead simple Rails localization.
Ruby
37
star
39

Mustache.tmbundle

A little textmate bundle for defunkt/mustache
36
star
40

resque-web

Sinatra-based web UI for Resque
Ruby
30
star
41

ike

Rake in Io.
Io
28
star
42

mapreducerb

Simple map/reduce in Ruby
Ruby
26
star
43

sake-tasks

Your own personal sake tasks, ripe for sharing.
25
star
44

matzbot

matzbot is nice so we are nice
Ruby
22
star
45

mustache-syntax-highlighter

Syntax highlighting plugin for mustache.rb
Ruby
22
star
46

repl-completion

Completion files for repl(1)
22
star
47

sfruby-meetup-resque

My Resque presentation at the SF Ruby Meetup, January 2010
Ruby
21
star
48

ftpd.rb

A simple ftp daemon, written in Ruby. Do not use — here for historical purposes.
Ruby
19
star
49

zippy

Zippy lil’ zipcode lib.
Ruby
18
star
50

subtlety

Subtlety: SVN => RSS, hAtom => Atom
Ruby
16
star
51

ambitious_activerecord

Unmaintained Ambitious ActiveRecord adapter, for Ambition.
Ruby
15
star
52

cheat.el

Cheat Emacs mode
Emacs Lisp
15
star
53

fixture_scenarios_builder

Build your fixtures in Ruby.
Ruby
15
star
54

resque-cli

A command line program for talking to Resque.
15
star
55

iui

Import of the iui library
JavaScript
14
star
56

ambitious_activeldap

Ambition adapter for ActiveLdap
Ruby
13
star
57

dodgeball.github.com

yes
Ruby
12
star
58

ooc-markdown

A Discount binding for ooc
C
12
star
59

pinder

My fork of Pinder, the Campfire API for Python developers.
Python
10
star
60

sdoc-helpers

Simple helpers to make using sdoc easier.
Ruby
10
star
61

metaid

10
star
62

Markdown-problems

Public repository to submit markdown problems to github support
9
star
63

currency_converter

Objective-C
9
star
64

magit

Mirror of the Magit Emacs mode.
Emacs Lisp
8
star
65

burn

Sinatra => Campfire
7
star
66

my-awesome-framework

A simple demonstration of how to effectively use Git submodules.
7
star
67

repo-in-a-repo

7
star
68

sakerb

Sake repository served fresh by the guys at Barefoot.
Ruby
7
star
69

barefootexamples

Ruby
7
star
70

ozimodo

An ancient Ruby on Rails powered tumblelog.
7
star
71

electron-wordwrap

7
star
72

redis-namespace

Moved to resque/redis-namespace
6
star
73

rtimeout

Ruby
6
star
74

lacampfire

Logical Awesome Campfire userscript.
JavaScript
6
star
75

my-fun-repo

5
star
76

my-fantastic-plugin

A simple demonstration of how to effectively use Git submodules.
5
star
77

github-markup

Moved!
5
star