Vamos a hacer uso de LITBox, a través de algunos ejemplos, para aprender mas de su uso. Ya en un artículo anterior hablamos sobre sus características generales, ahora veremos como configurarlo y usarlo dependiendo de lo que queramos mostrar en el LITBox.

Empezemos descargando el código fuente de la página del autor. El comprimido contiene los siguientes archivos: dragdrop.js, effects.js, litbox.js, litbox.css, litboxflash.js, prototype.js, scriptaculous.js.

El primer paso para usar LITBox es llamar a los archivos antes mencionados, para ello crearemos un archivo llamado prueba.html y escribiremos lo siguiente:

<html>
   <head>
   <title>Probando litbox</title>
   <script type="text/javascript" src="prototype.js"></script>
   <script type="text/javascript" src="effects.js"></script>
   <script type="text/javascript" src="dragdrop.js"></script>
   <script type="text/javascript" src="litboxflash.js"></script>
   <script type="text/javascript" src="scriptaculous.js"></script>
   <script type="text/javascript" src="funciones.js"></script>
   <link rel="stylesheet" href="litbox.css" type="text/css" media="screen" />
   </head>

LITBox nos permite configurar 3 tipos de ventanas a traves de su parametro type: alert, confirm y window. Empezemos entonces por el primer tipo.

Alert

Una vez hecha la llamada de los archivos .js y .css, estamos listos para usar LITBox, así que en nuestra pagina prueba.html agregaremos un botón para que muestre una ventana de tipo Alert. Escribiremos lo siguiente:

<p>
   <input type="button" onclick="new LITBox('HOLA MUNDO!', {type:'alert', overlay:false, height:60, width:300, resizable:false, opacity:.6});" value="Hola Mundo" />
</p>

Así de fácil! Podrá ver una explicación de cada parametro en el artículo anterior.

Window

El tipo window, se usa mayormente para mostrar el contenido de una página web. En este caso vamos a tratar de mostrar una fotografia en el LITBox. Para ello vamos a crear otro archivo html llamado imagen.html y en éste agregaremos una imagen. quedaría algo así:

<html>
   <head>
   <title>Imagen</title>
   </head>
   <body>
   <img src="imagen1.jpg" alt="paisaje" width="448" height="336" />
   </body>
</html>

Ahora volvemos al archivo prueba.html y vamos a llamar al archivo imagen.html para que sea mostrado a través del LITBox, sería algo así:

<p>
   <input type="button" onclick="new LITBox('imagen.html',{type:'window',overlay:true,height:370, width:450});" value="Mostrar imagen" />
</p>

Nota: No podemos hacer referencia directa al archivo de imagen, recuerde que el tipo window acepta refencia a archivos web. Por ello es que hemos creado el archivo imagen.html y luego lo llamamos en el archivo prueba.html usando el LITBox.

Confirm

Ahora veremos el último tipo de ventanas: confirm. Este muestra un cuadro con una pregunta y debajo las opciones Yes y No. Lo podemos usar para hacer una pregunta antes de realizar alguna acción. Este tipo trabaja con el parámetro func, donde debemos expecificar el nombre de la función que responderá si nosotros elegimos Yes. Entonces empezemos creando un archivo adicional llamado funciones.js, y escribiremos allí:

 respuesta_si = function(){
 new LITBox('Tu respondistes que SI, excelente!', {type:'alert',overlay:false,width:200,height:150});
 }

Ahora en el archivo prueba.html crearemos un boton para mostrar una ventana del tipo confirm. Escribiremos lo siguiente:

<p>
 <input type="button" onClick="new LITBox('¿Te gusta el ejemplo? (Tienes que elegir SI para ver el resultado)',{type:'confirm',overlay:false,func:respuesta_si,width:350,height:150});" value="Pregunta">
</p>

Como se dará cuenta, en el parámetro func especificamos la funcion respuesta_si. Entonces cuando se elija la opción Yes se mostrará una ventana con el mensaje ‘Tu respondistes que SI’, caso contrario no mostrará nada.

Hemos visto como configurar y usar LITBox, de manera sencilla y práctica. Pueden descargar el archivo con los ejercicios que aplicamos en este tutorial. Espero que el artículo les pueda servir ya que por parte del autor no hay mucha documentación.