LightFace – Lightbox al estilo Facebook con Mootools



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.

LightFace - Lightbox al estilo Facebook con Mootools

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

Related Posts Plugin for WordPress, Blogger...


Desarrollador de software egresado de la Universidad Católica de Argentina, blogger y fotógrafo.

Trackbacks/Pingbacks

  1. Bitacoras.com - 12/11/2010

    Información Bitacoras.com…

    Valora en Bitacoras.com: 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. (…) Sigue LightF……

  2. Tweets that mention LightFace – Lightbox al estilo Facebook con Mootools | Pixelco blog -- Topsy.com - 12/11/2010

    […] This post was mentioned on Twitter by Pixelco – Diego, Pixelco – Diego and Jhon Pérez, Jhon Pérez. Jhon Pérez said: LightFace – Lightbox al estilo Facebook con Mootools | Pixelco blog http://t.co/cWnb2M4 vía @diegocambiaso […]

Comentario

Google+