LightFace es una solución desarrollada con la biblioteca Javascript Mootools para mostrar contenido usando ventanas modales al estilo del popular Lightbox, pero con la estética de la interfaz de Facebook.
Principales características de LightFace:
- Son sólo 5 classes: LightFace, LightFace.Request, LightFace.IFrame, LightFace.Image y LightFace.Static.
- Permite redimencionar las ventanas.
- Posee varias opciones para personalizar cada instancia.
- Soporta eventos de teclado.
- Funciona con la de Mootools Drag para hacer la ventana movible.
- Permite añadir botones según las necesidades.
- Agrega y remueve eventos según se necesite.
- Soporta: IE6+, Firefox, Safari, Chrome, Opera y iPad/iPhone.
Implementar LightFace
Enlazar los archivos en cualquier desarrollo web, es así de sencillo:
<style type="text/css"> @import "lightface/Assets/LightFace.css"; </style> <script type="text/javascript" src="mootools-1.3.js"></script> <script type="text/javascript" src="lightface/tests/mootools-more-drag.js"> </script> <script type="text/javascript" src="lightface/Source/LightFace.js"> </script> <script type="text/javascript" src="lightface/Source/LightFace.Request.js"> </script> <script type="text/javascript" src="lightface/Source/LightFace.Static.js"> </script> <script type="text/javascript" src="lightface/Source/LightFace.IFrame.js"> </script> <script type="text/javascript" src="lightface/Source/LightFace.Image.js"> </script> <script type="text/javascript">
Crear una ventana para mostrar contenido requiere un código similar al siguiente:
//profile
var profileBox = new LightFace({
width: 500,
draggable: true,
title: 'David Walsh\'s Profile',
content: '<p>Cotneido<p/>,
buttons: [
{ title: 'Close', event: function() { this.close(); }, color: 'blue' }
]
});
$('profile').addEvent('click',function() { profileBox.open(); });
LightFace
Sitio/demo/descarga: davidwalsh.name/facebook-lightbox