eBreak.in Blogs

Projects > Facebox

Facebox is a Mootools alternative to the original Facebox for jQuery.
It behaves like the pop-up windows of Facebook, and can display images, Flash, html, ...

Demo's

Simple demo

Title
Message

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.

Monday, January 9, 2012

facebook