Durante el desarrollo de mi último proyecto he tenido la suerte de conocer un fantástico efecto 2.0 desarrollado por Lokesh Dhakar. Se trata de un efecto Lightbox que permite mostrar espectaculares pop-ups con imágenes y grupos de imágenes. Las características del código original no eran suficientes para el proyecto en el que trabajaba, así que tuve que ampliarlo para que fuera capaz de mostrar pop-ups que cargaran dinámicamente de un fichero. De este modo nació el que he bautizado como Ajax LightBox, espero que les sea de tanta utilidad como a mi.
Qué es Ajax Lightbox
Ajax Lightbox es un script no intrusivo que permite mostrar una ventana por encima del contenido actual de una página. El término no intrusivo se utiliza para denominar al código javascript que no se ejecuta inmerso en el HTML si no que se aplica de manera indirecta una vez cargado el documento, permitiendo conseguir independizar completamente “Contenido, Presentación y Comportamiento. Comentar también que un script no intrusivo permite cumplir con el punto de verificación 6.3 de las normas de accesibilidad WCAG (prioridad 1, necesario para nivel A):
"Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page."
Como puede observar en el siguiente ejemplo, usted puede visualizar tres tipos diferentes de ventanas:
- Contenido dinámico extraido vía Ajax de un fichero.
- Imágenes individuales.
- Grupos de imágenes.
Si conoce algo de javascript y css puede personalizar el efecto para ajustarlo a sus necesidades:
Ha sido testeado en las últimas versiones de los navegadores más extendidos: IE/FireFox/Opera.
Cómo utilizarlo
1. Configuración
-
Ajax Lightbox utiliza dos librerías opensource: Prototype y Scriptaculous. Por tanto debe incluirlas en la cabecera de su página:
<script type="text/javascript" xsrc="js/prototype.js" mce_src="js/prototype.js"></script>
<script type="text/javascript" xsrc="js/scriptaculous.js?load=effects" mce_src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" xsrc="js/lightbox.js" mce_src="js/lightbox.js"></script>
Puede modificar la librería lightbox.js para configurar algunos parámetros del efecto:
fileLoadingImage: Imagen de carga
overlayOpacity: Nivel de transparencia de la capa
overlayvar animate: Activa/Desactiva rescalable animations
resizeSpeed: Controla la velocidad de rescalado de la imagen (1 = muy lento y 10 = muy rápido)
borderSize: Grosor del borde - Incluya también la hoja de estilos lightbox.css añada los estilos a la hoja de estilos actual de su Site. Puede modificar los estilos para cambiar las características del efecto (Colores, tamaños, etc).
<link rel="stylesheet" xhref="css/lightbox.css" mce_href="css/lightbox.css" type="text/css" media="screen" />Es importante que compruebe dentro de la hoja de estilos que las imágenes están siendo referenciadas a las ubicaciones correctas.
2. Activación
- Añada un atributo rel="lightbox_text" a cualquier enlace que apunte a una página web para activar el efecto:
<a xhref="nota.htm" mce_href="nota.htm" rel="lightbox_text" >Ver nota</a> - Añada un atributo rel="lightbox" a cualquier enlace a una imagen en el que quiera activar el efecto. Puede incluir un atributo title si quiere visualizar un caption en la ventana:
<a xhref="images/image-1.jpg" mce_href="images/image-1.jpg" rel="lightbox" title="Los recursos de HelloGoogle son la pera">imagen #1</a> - Si quiere agrupar un conjunta de imágenes, incluya un nombre de grupo dentro de unos corchetes en el atributo rel:
<a xhref="images/image-1.jpg" mce_href="images/image-1.jpg" rel="lightbox[mi_grupo]">imagen #1</a>
<a xhref="images/image-2.jpg" mce_href="images/image-2.jpg" rel="lightbox[mi_grupo]">imagen #2</a>
<a xhref="images/image-3.jpg" mce_href="images/image-3.jpg" rel="lightbox[mi_grupo]">imagen #3</a>
Descárgueselo
El código se ofrece bajo la licencia Creative Commons, esto significa que puede utilizarlo y modificarlo libremente en sus aplicaciones. Solamente debe mantener los créditos tal y como están, para reconocer la labor de sus autores.
Espero que este efecto le sea de tanta utilidad como a mi, y que a partir de ahora pueda sorprender a sus visitantes con este Ajax Lightbox 2.0.
Mayo 17th, 2007 a las 1:53 am
es un recurso de una valiosa utilidad
Junio 8th, 2007 a las 7:39 am
Que excelente, esto andaba buscando desde hace rato!
Junio 8th, 2007 a las 10:59 am
Me alegra saber que les fue de utilidad.
Un saludo.
IG
Junio 10th, 2007 a las 2:01 pm
Estoy construyendo un website y buscaba esto que había visto, lo incorporé hace poco pero necesitaba tus explicaiones y personalización. Grcias y adelante con vuestro proyecto.
Junio 14th, 2007 a las 6:11 am
gracias!!!! la verdad es que fue de mucha utilidad
Junio 15th, 2007 a las 11:47 am
De mada. Un saludo.
Junio 25th, 2007 a las 11:29 pm
Muchas gracias por esto, desde hace un rato habia estado.
Esta muy chido, el unico incoveniente que tengo haora es como reajustar el tamaño del cuadro. Ya que la idea que quiero realizar es colocar un cuadro de acceso y me gustaria que fuera mas pequeño que el actual.
Si alguien me puede ayudar
Junio 26th, 2007 a las 12:56 am
Muy bueno, tengo esta otra direccion que me parece muy interesante también…
http://prototype-window.xilinus.com/
Junio 28th, 2007 a las 12:39 pm
Muchas gracias …. de verdad
No tengo ni idea de programación y lo he conseguido!!!
Junio 28th, 2007 a las 12:42 pm
Gracias a ti por tu comentario.
Julio 2nd, 2007 a las 10:29 pm
Quiero poner lightbox pero en la pagina de un iframe o sea dentro de el y bueno me funciona perfecto pero solo en el iframe y no a pantalla completa… no se si se entiende…. abre dentro del Iframe pero en el Parent no.. y se ve Mal… alguien me podria decir q modificar para hacer q el enlace entienda q no quiero abrirlo en Iframe sino en el Parent
Julio 3rd, 2007 a las 8:34 am
Hola.
Pues me temo que lo que necesitas no se puede hacer, al menos de una manera sencilla. El lightbox es una capa que se añade sobre el cuerpo de la página, y en tu caso, siempre se abrira dentro del iframe.
La única forma de resolverlo sería modificar el código para que la capa se añadiera en el DOM del padre del iframe. Esto puede conllevar bastantes problemas de seguridad y no estoy del todo seguro que acabara funcionando.
Julio 11th, 2007 a las 7:35 pm
Excelente codigo. Agrega una muy grata interfaz a la web en que se implemente. Exito en el Proyecto. Saludos desde Venezuela
Julio 27th, 2007 a las 12:13 am
excelente codigo.. lo andaba buscando
Julio 31st, 2007 a las 7:59 am
Hola, este script es genial pero, alguien sabe como ejecutarlo desde el interior de una pelicula flash?… como le paso el parametro REL?, gracias saludos!
Agosto 16th, 2007 a las 7:19 pm
Excelente código y fácil manejo….
Septiembre 6th, 2007 a las 4:32 pm
Cuando utilizo este efecto en un página que se carga mediante Ajax funciona a medias, el efecto se carga de forma errónea.
Si alguien ha tenido un problema similar y me puede ayudar…muchas gracias!!!
Septiembre 6th, 2007 a las 11:17 pm
hola compañero no se mucho de esto pero quisiera saber si esto del Lightbox tambien lo puedo poner en practica con cogido PHP
Septiembre 19th, 2007 a las 8:24 pm
Excelente codigo.
Solo tengo una duda. Es posible hacer que en la ventana con texto haya un Scrollbar?
Si puedes ayudarme te lo agradecere mucho!!
Slds.
Septiembre 20th, 2007 a las 12:27 pm
Hola, estoy haciendo una web para mi empresa, y este efecto, me musta mucho para una galeria.
Pero necesito que el efecto se habra en pantalla completa desde el enlace situado en un popup, sin que se este se cierre.
Si alguien pudiera ayudarme en eso por favor.
Gracias
Septiembre 21st, 2007 a las 4:09 pm
Tengo actualmente implementado su Script en mi pagina web me parece Genial. Siempre lo habia utilizado solo para hacer vinculos a imagenes, el dia de hoy comence a utilizarlo para hacer vinculos a paginas HTML, todo funciona igual de perfecto pero resulta que en la pagina web que esta cargando via ajax no me reconoce el español , ya que no muestro acetuaciones ni la Letra Ñ , podrian ayudarme o saber que es lo que deberia hacer para solucionar este problema , Gracias
Septiembre 22nd, 2007 a las 7:53 pm
hola a todos…
la cuestion esta muy buena , es exelente…
me gustaria saber como hago para llamar un pagina desde el moemnto que le doy click a una de las imagenes como por ejemplo actualizar el numero de visitas en la base dedatos para esa imagen que seleciono.
gracias.. le agradesco supronta respuesta..
Septiembre 22nd, 2007 a las 7:55 pm
mi correo es este…. wmexier@hotmail.com.. le agradesco cualquier cosa… que tengan un buen dia ..
Octubre 16th, 2007 a las 9:02 am
[…] Investigando como se podría realizar la navegación por imágenes de una manera atractiva y cómoda encontramos el llamado efecto lightbox. Este efecto 2.0 desarrollado por Lokesh Dhakar permite mostrar pop-ups con imágenes y grupos de imágenes de una manera bastante atractiva. Seguimos analizando este efecto, cuando encontramos una mejora llamada ’Ajax lightbox’, creado por Ignacio G. en su blog hellogoogle.com la cual conseguía, además de manejar imágenes, cargar en el pop-up ficheros externos. Este efecto nos permitiría enseñar en estos pop-ups pequeños formularios, en tiempo de ejecución, lo cual haría mucho más ágil la navegación. Según su propio autor, “Ajax Lightbox es un script no intrusivo que permite mostrar una ventana por encima del contenido actual de una página. El término no intrusivo se utiliza para denominar al código javascript que no se ejecuta inmerso en el HTML si no que se aplica de manera indirecta una vez cargado el documento, permitiendo conseguir independizar completamente. ’Contenido, Presentación y Comportamiento’”. […]
Noviembre 7th, 2007 a las 2:17 pm
Asombrosamente sencillo, gracias
Noviembre 22nd, 2007 a las 3:40 am
Hola,
este efecto es muy bueno, pero necesito utilizarlo con un formulario. Es decir al dar Ok del form, cuando realiza action=’url’ y el rel=”lightbox_text” solo funciona cuando está con el href.
Gracias.
Noviembre 23rd, 2007 a las 9:31 pm
Hola
Estoy utilizando estas librerías, pero el problema que tengo es que si agrego código dinámico para crear las imágenes con ajax… el efecto no funciona, si alguien sabe como puedo solucionarlo… les agradecería…
PD: Si no utilizo ajax para crear mis imágenes dinamicamente si funciona.
Noviembre 26th, 2007 a las 3:44 pm
Antes que nada muchas gracias por el código es muy bueno! Tengo un pequeño problema.. yo estoy utilizando otra función ajax para recargar otros html siempre sobre la misma página, y es en uno de estos html que se recargan sobre el principal que utilizo el código. El problema es que cuando el html que cargue este código es cargado por mi html principal, ya no me carga la imagen en la página ni con el efecto, sino que se abre en una nueva página. Alguien tiene idea que puede estár pasando o que puedo modificar?
Diciembre 30th, 2007 a las 4:48 am
Gracias por el aporte, muy bueno el efecto, se agradece desde Chile!
Enero 12th, 2008 a las 3:19 am
estoy implementando este efecto en mi sitio web pero kisiera saber como puedo manipular la posision de la imagen cuando aparece. porke sale muy arriba y kisiera saber como modifico la posicion pa ke salga mas abajo
Febrero 13th, 2008 a las 11:20 pm
Este es un efecto muy bueno, pero me gustaría saber si puedo cargar alguna información en la página principal dependiendo de las acciones que se realicen en la capa que se abre al ejecutar el efecto
Marzo 28th, 2008 a las 3:52 pm
Ya es hora de ir actualizando a Lightbox 2.0 scripptaculous 1.8.3 y prototype 1.6.0.2
Salu2
Mayo 4th, 2008 a las 10:01 pm
hola muy bueno el ejemplo, pero necesito si alguien me puede ayudar a tener esas ventanas emergentes ni bien abro mi web principal, lo nevesio como para poner una publicidad q salga por defecto al abrir mi web sin necesidad de estar presionando un boton u otra cosa, agradeceria su ayuda , gracias!!!