David Walsh Blog

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!

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:

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

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:


<a href="large.jpg" rel="lightface"><img src="thumb.jpg" alt="My Image" title="Click for larger view" /></a>

…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.

More To Come!

Look forward to more demos of how you can use LightFace in the future (like photo tagging).  In the mean time, please feel free to fork on GitHub to help me improve LightFace and file bug reports on LightFace issues.