Projects > Facebox
Back to index page
Facebox is a Mootools alternative to the original Facebox for jQuery.
Demo's
Simple demo
Terms and conditions demo
Do you agree to our terms and conditions ?
Image demo
Source code for all demo's
Usage
Setup
Before you can start, you'll have to add the following files to your page :
<script type="text/javascript" src="facebox/facebox.js"></script>
<link type="text/css" rel="stylesheet" href="facebox/facebox.css" />
Simple usage
A simple Facebox setup looks like this :
var box = new Facebox({
title: 'Facebox title',
message: 'My message'
});
box.show();
Open on click
To create a link that opens a Facebox window, you can use this code as an example :
<script type="text/javascript">
function openFacebox() {
var box = new Facebox({
url: 'myfile.html',
ajaxDelay: 400
});
box.show();
}
</script>
<a href="javascript: openFacebox();">Click me</a>
Modifications
Options
title : the title of the message.message : the message to display.url : url of the page/image to load in the Facebox.ajaxErrorMessage : message to display when an ajax error occurs.ajaxDelay : minimum time to display the loading message. (In milliseconds. Defaults to 0)width : width of the Facebox. (In pixels. Defaults to 370)height : height of the Facebox. (In pixels or auto. Defaults to auto)draggable : true/false. If true, the Facebox is movable (by clicking and holding the title) (Defaults to true).cancelValue : text to display on the cancel/close button.cancelFunction : function to fire when the cancel button is clicked. (Defaults to closing the Facebox)submitValue : text to display on the submit button. (Not required, is empty at default)submitFunction : function to fire when the submit button is clicked. (Only works when submitValue is not empty)submitFocus : true/false. If true, the submit button will be focused. (Pressing enter will activate it)fadeOpacity : opacity for faded Facebox instances. (Ranging from 0-1. Defaults to 0.75)
Extra functions
instance.show() : opens/shows a Facebox instance.instance.close() : closes a Facebox instance.instance.fastclose() : closes a Facebox instance without a transition.instance.returnMessageBox() : returns a div object which contains the message part of the Facebox.instance.fade() : makes a Facebox instance semi-transparent and disables its cancel and submit buttons.instance.unfade() : makes a Facebox instance visible again and enables its cancel and submit buttons.
Download Facebox 1.1