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.
Esta muy bueno este codigo y el resultado se ve muy bien….
solo una cosa, las funciones si las envia bien si es en ese sentido
pero si quiero enviar una “id” o un “valor” (value) como podria hacerlo? oséa supongo que me entienden algo asi como
donde $id tuviera un valor yo que se, 12, y enviase a la funcion y quela funcion dijera, ” bien has respondido si, y tu valor es de 12″ me explico? alguna solución?
Estuve probando con parametros de entrada y hay errores. Lo que hice fue: Agregar un caja de texto (input), y darle un id , luego modifique el script funciones.js para que la funcion respuesta_si acepte un parametro de entrada, y finalmente en el boton agrege a la funciones respuesta_si un parametro.
Escribo algo en la caja de texto, presiono el boton y aparece el litbox con la pregunta, doy en si y aparece una ventana litbox con el valor que ingrese en la caja de texto. Sin embargo el error es que: no presiono SI y ya aparecio la ventana de respuesta. Lo mismo si presiono NO.
Son bugs que seguramente el autor ira corrigiendo… espero. Saludos
como puedo mandar a imprimir lo que esta adentro del LITBox solamente ¿cual es el codigo para hacerlo gracias?
Es una buena pregunta, lamentablemente no podria darte una respuesta, ademas la pagina del autor no explica ello.
cual es la pagina del autor ? si me puedes decir
Lamento no haber colocado el link en el articulo, aqui está: http://www.ryanjlowe.com/?p=9#
hola como puede hacer cunsulta con mysql y php en una ventana litbox
tengo la misma duda que daus0n, como enviamos una variable a unafuncion, intente colocar de la misma forma que muestra pero me ejecuta la funcion directamente
<a href="javascript:void(0);" onclick="new LITBox('¿Te gusta el ejemplo? (Tienes que elegir SI para ver el resultado)',{type:'confirm',overlay:false,func:eliminar_si(),width:350,height:150});” >Eliminar
Este es mas o menos el codigo, pero no me hacepta el parametro
Bueno gracias por la ayuda pero ya lo logre XD
Comparto mi codigo, espero que les sirva.
<a href="javascript:void(0);" onclick="new LITBox('Está seguro de eliminar el registro',{type:'confirm',overlay:false,func: function() { document.location.href='contentDel.php?id=’;},width:220,height:100});”>
Eliminar
como verán estoy colocando el codigo y ya no lo mando a una funcion en otro archivo. Si no que creo la funcion en el mismo lugar.
Si hay otra forma, agradeceria su aporte
Estuve probando los archivos puestos en esta pagina y surgió un pequeño problema con los
Cuando muestro un LITBox los select quedan encima y los ejemplos que cargo en LITBox
¿Cómo hago para que no pase?
Necesito saber cómo hacer para que el litbox quede por encima de una capa con una pelicula en Flash.
Otra más, en Firefox, me muestra el litbox unos segundos y se sale,que puede ser?
Gracias