Facebook-style Lightbox/Modalbox powered by jQuery and MooTools

Famspam is sharing Facebox, a Facebook-style Lightbox useful to display images, DIVs, or entire remote pages using AJAX. The download package comes with the JavaScript and CSS files, a loading image, a close label, four corners, and solid border images.

Implementation Example

1) Load Dependencies – First, you need to load jQuery before Facebox.

<script src="jquery.js" type="text/javascript"></script>
<link href="facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="facebox.js" type="text/javascript"></script>

2) Attach It onLoad – While 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 onLoad.

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

3) Open Image – Notice that rel has the value “facebox”

<a href="stairs.jpg" rel="facebox">text</a>

If you need assistance you can join Famspam’s Google Groups mailing list.

Inspired by Facebook’s Modal Box (lightweight, subtle, and very stylish), Davis Walsh took Facebook’s imagery and CSS and combined it with MooTools’ awesome functionality to duplicate the effect.

The MooTools JavaScript

window.addEvent('domready',function() {

/* hide using opacity on page load */
$('fb-modal').setStyles({ opacity:0, display:'block' });

/* hiders */
$('fb-close').addEvent('click',function(e) {
$('fb-modal').fade('out'); 
});

window.addEvent('keypress',function(e) { 

if(e.key == 'esc') { $('fb-modal').fade('out'); } });

$(document.body).addEvent('click',function(e) { 
if($('fb-modal').get('opacity') == 1 && !e.target.getParent('.generic_dialog'))
{ 
$('fb-modal').fade('out'); 
} 

});

/* click to show */
$('fb-trigger').addEvent('click',function() {
$('fb-modal').fade('in');
});

});