LightFace: Facebook Lightbox for MooTools

One of the web components I’ve always loved has been Facebook’s modal dialog.  This “lightbox” isn’t like others:  no dark overlay, no obnoxious animating to size, and it doesn’t try to do “too much.”  With Facebook’s dialog in mind, I’ve created LightFace:  a Facebook lightbox clone for MooTools.  LightFace and its family of classes work well with iFrames, images, AJAX-requested content, static positioning, and static content.

LightFace Features

LightFace has a lot of backed in goodness!

• Five compact classes: LightFace, LightFace.Request, LightFace.IFrame, LightFace.Image, and LightFace.Static
• Constrains image sizes with window resizes
• Provides a host of options to customize each instance
• Responds to designated keyboard events
• Works with MooTools More’s Drag class to make the lightbox movable (Drag is *not* included within the repo)
• Add as many buttons as you’d like
• Adds and removes events as needed to minimize strain on the browser
• Automatically positions and resizes with window resizing and scrolling
• Supports IE6+, Safari, Chrome, Opera, and iPad/iPhone

LightFace Core

LightFace.js is the core piece of LightFace.  All subsequent classes extend the core functionality provided by LightFace.  Creating a new LightFace lightbox is as easy as:

// Create instance
var modal = new LightFace({
	height: 200,
	width: 300,
	title: 'My Profile,
	content: 'Lorem ipsum....'
});

// Open Sesame!
modal.open();

//Update Content
modal.load('This is different content....');

LightFace provides a wealth of flexibility by providing numerous options to customize the lightbox as you’d like:

• width – (*integer|string*, defaults to ‘auto’) The desired width of the of the modal box.
• height – (*string|string*, defaults to ‘auto’) The desired height of the of the modal box.
• draggable – (*boolean*, defaults to false) Should the modal box be draggable by its title?
• title – (*string*, defaults to ”) The modal’s initial title.
• content – (*string*, defaults to ‘<p>Message not specified.</p>’) The modal’s initial content.
• buttons – (*array*, defaults to []) An array containing any number of objects containing button information.
• fadeDelay – (*integer*, defaults to 150) The delay before instructing the overlay to fade in/out.
• fadeDuration – (*integer*, defaults to 150) The duration of overlay fade while content is loading.
• keys – (*object*, defaults to object w/ ‘esc’ key handler) Key handlers to add events to while the modal box is open.
• zIndex – (*integer*, defaults to 9001) The desired zIndex of the modal.
• constrain – (*boolean*, defaults to false) Should the modal box constrain content when the window is resized?
• errorMessage – (*string*, defaults to ‘The requested file could not be found.

  ‘) The error message displayed if a resource is not found.

• resetOnScroll – (*boolean*, defaults to true) Keeps the modal box in the same place on the screen if the user scrolls.

LightFace features many methods to let you control the content and flow of each LightFace instance:

• load(content,title?) – loads specified content into the lightbox
• open(fast?) – opens the lightbox
• close – closes the lightbox
• fade – fades in the “loading” overlay
• unfade – fades out the “loading” overlay
• getBox – returns the entire DOM node so you may update the node itself at will
• addButton – adds a button to the lightbox footer
• showButton – shows a button
• hideButton – hides a button

LightFace.Request

LightFace.Request merges the powers of LightFace and MooTools’ Request (AJAX) class to load content into the lightbox when desired.  LightFace features an internal overlay and Facebook-style indicator which elegantly fades in and out during the time the AJAX request is running.  LightFace adds two additional options:  url and request.  The request option represents the object to be passed directly to LightFace’s internal Request class instance.  Here’s what a usage of LightFace.Request would look like:

// Create the instance
var modal = new LightFace.Request({
	width: 400,
	height: 300,
	title: 'User Information',
	url: 'user.php',
	request: {
		method: 'post',
		data: {
			userID: 3
		}
	}
});

// Open!
modal.open();

// Load a different url!
modal.load('content.php','Static Content');

An AJAX request is made to the url provided.  LightFace.Request mixes the settings provided with the internal Request class’ default settings so you always have callbacks once the request is complete!

LightFace.Image

LightFace.Image specializes in loading images within the lightbox.  The advantage to using LightFace.Image is that the lightbox will constrain the images to appropriate height and width with relation to the window size.  If the user resizes their browser, the image will resize appropriately.

var light = new LightFace.Image({
	title: 'Image ' + (index + 1),
	fadeDuration: 100,
	fadeDelay: 400,
	keys: {
		left: function() { //load the previous image
			if(index!= 0) this.load(images[--index],'Image ' + (index + 1));
		},
		right: function() { //load the next image
			if(index != images.length-1) this.load(images[++index],'Image ' + (index + 1));
		},
		esc: function() {
			this.close();
		}
	}
});

If you want certain images to load in an IFrame, with the following HTML format:

…you could easily code the following:

var modal = new LightFace.Image();
$$('a[rel="lightface"]').addEvent('click',function() {
	modal.load(this.get('src'),this.get('alt'));
});

LightFace does not internally look for links with specific rel attributes.  My opinion is that those techniques are bad practice.

LightFace.IFrame

LightFace.IFrame provides a simple method for loading content from within an IFrame.  No thrills here, but the original LightFace class has been modified to look more elegant.  An example usage would be:

var modal = new LightFace.IFrame({
	height:400,
	width:800,
	url: 'http://google.com',
	title: 'Google!'
}).addButton('Close', function() {
	light.close();
},true).open();

I recommend setting a fixed height and width when creating LightFace.IFrame instances.

LightFace.Static

All LightFace classes automatically size and center the modal dialog. LightFace.Static bucks the trend by allowing for absolute positioning of the lightbox so you can place dialog anywhere you’d like!  Provide x and y coordinates to place the LightFace and it will appear exactly where you would like it to, plus offsets provided within the instance options:

//Create context menu
var contextFace = new LightFace.Static({
	title: 'Context',
	content: 'Hello!',
	width: 80,
	height: 100
});

//Open when context-link is clicked
document.id('context-link').addEvent('click',function(e){
	if(e) e.stop();
	contextFace.open(false,e.page.x,e.page.y);
});

//Close if clicked outside
var closer = function(e) {
	var parent = document.id(contextFace).getParent('.lightface');
	if(e.target != parent && !parent.contains(e.target)) {
		contextFace.close();
	}
};
document.id(document.body).addEvent('click',closer);

LightFace.Static is a perfect candidate for your next context menu or “toaster” functionality.

View Demos » Download LightFace » Updated Documentation »