Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.
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
- jQuery (>= 1.4.2)
If you are using a Package Manager, these dependencies will be installed automatically, but depending on your environment you may still need to add references to them manually.
There are several different ways to get the code. Some examples below:
Dirty Forms is available over jsDelivr CDN and can directly included to every page.
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.facebox/1.4.1/jquery.facebox.min.js"></script>
jsDelivr also supports on-the-fly concatenation of files, so you can reference only 1 URL to get jQuery and jquery.facebox in one request.
<script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery@1.11.3,jquery.facebox@1.4.1"></script>
Download and save one of two available files to include Dirty Forms to your page, either the latest distribution or the latest minified version.
<script type="text/javascript" src="jquery.facebox.min.js"></script>
You can also conveniently get all of the latest Dirty Forms files in one Zip Download.
Facebox is even available through NPM, Bower, and NuGet. Just use one of the following commands below to install the helper, including all dependencies.
// NPM
$ npm install jquery.facebox
// Bower
$ bower install jquery.facebox
// NuGet
PM> Install-Package jquery.facebox
A SourceMap file is also available via CDN or your favorite package manager.
####CDN
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.facebox/1.4.1/jquery.facebox.min.js.map"></script>
NPM or Bower will install the file into the destination directory.
jquery.facebox.min.js.map
For NuGet, this file is not included in the package, but you can get it from here if you really need it.
Include the prerequisites and facebox in the page. 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'
NOTE: The default is to download the images via jsDelivr CDN, so be sure to update these settings if you want to host the images locally.
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
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:
jQuery(document).trigger('close.facebox')
Facebox also has a bunch of other hooks:
loading.facebox
beforeReveal.facebox
reveal.facebox
(aliased asafterReveal.facebox
)init.facebox
afterClose.facebox
(callback after closingfacebox
)
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>
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.