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.
es un recurso de una valiosa utilidad
Que excelente, esto andaba buscando desde hace rato!
Me alegra saber que les fue de utilidad.
Un saludo.
IG
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.
gracias!!!! la verdad es que fue de mucha utilidad
De mada. Un saludo.
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
Muy bueno, tengo esta otra direccion que me parece muy interesante también…
http://prototype-window.xilinus.com/
Muchas gracias …. de verdad
No tengo ni idea de programación y lo he conseguido!!!
Gracias a ti por tu comentario.
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
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.
Excelente codigo. Agrega una muy grata interfaz a la web en que se implemente. Exito en el Proyecto. Saludos desde Venezuela
excelente codigo.. lo andaba buscando
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!
Excelente código y fácil manejo….
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!!!
hola compañero no se mucho de esto pero quisiera saber si esto del Lightbox tambien lo puedo poner en practica con cogido PHP
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.
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
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
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..
mi correo es este…. wmexier@hotmail.com.. le agradesco cualquier cosa… que tengan un buen dia ..
Asombrosamente sencillo, gracias
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.
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.
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?
Gracias por el aporte, muy bueno el efecto, se agradece desde Chile!
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
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
Ya es hora de ir actualizando a Lightbox 2.0 scripptaculous 1.8.3 y prototype 1.6.0.2
Salu2
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!!!
He implementado el lightbox2 pero no logro hacer muchas cosas como las que explicas. Implementaré tu script en mi página. Gracias por tu tiempo y tu esfuerzo.
hola 2 preguntas!…
1. se puede implementar en el evento onclik() de un button?
2. Al momento que se levante el popup la pantalla que lo ejecutó (atras) puede quedar inactiva!….me explico q solo se habilite al momento que yo cierre el popup en la (X).
gracias por su atención..
el codigo me funciona pero cuando lo voy subir a la pagina no funciona podria darme un consejo
Hola Harold, comprueba que las versiones de PHP que tienes instaladas en tu servidor local y de producción son las mismas.
Buenas! Fantástico artículo y va de lujo. Le meto un formulario, y si quiero que en vez de cargarse la página donde se envía en sí el formulario quiero que se cargue dentro de la ventana esta, como se haría? He probado en poner el rel=»lightbox_text» en el link del envío pero se sigue cargando la nueva página. Como podría hacerlo?
Saludos!
Estimado Ignacio:
Estoy tratando de utilizar el LightBox en mi proyecto pero el problema es que no se ejecuta ninguna animación y la caja mostrada siempre tiene el mismo tamaño no adaptandose al contenido… que puede ser?
hola, miren
no entiendo donde tengo que instalar el 1º punto….si es en mi pagina web o en mi orndenador….de verdad no entiendo nada de nada. por favor ayudenme. gracias.
Ajax Lightbox utiliza dos librerías opensource: Prototype y Scriptaculous. Por tanto debe incluirlas en la cabecera de su página:
[quote comment=»836″]Buenas! Fantástico artículo y va de lujo. Le meto un formulario, y si quiero que en vez de cargarse la página donde se envía en sí el formulario quiero que se cargue dentro de la ventana esta, como se haría? He probado en poner el rel=»lightbox_text» en el link del envío pero se sigue cargando la nueva página. Como podría hacerlo?
Saludos![/quote]
hola tengo esa misma inquietud si lograste solucionarlo profavor dime bueno nos vmeos
Hey alguien sabe ¿por que cuando subo mis archivos a mi servidor linux no funciona el ajax lightbox? sale espero alguien tenga esa respuesta
Hola Silva.
Comprueba que en tu servidor tienes instalada la última versión de PHP.
excelente recurso.
Muchas garcias
Hola: emhorabuena por tu buen gusto al customizar la cajade luz, esta fenomena y creo que me va a ayudar mucho.
Lo unico que no he logrado cambiar, porque a mi me gustaria mas que los textos aparcecieran por abajo en vez de por arriba, como podria cambiar eso?, es muy dificil? te agradeceria cualquier ayuda para hacer ese cambio.
Muchas gracias por tu ayuda y por tu caja de luz, he buscado un monton y la tuya es la que mas me ha gustado como va.
gracias.
Pedro
Gracias por tu respuesta Ignacio. Ps voy a checar.. pero pues si en windows me jala con un php no tan nuevo no entiendo cual sea el pedo… mmm chale .. no pienso q esa sea la solucion, porque ni si kiera me abre la caja dentro de la misma pagina me la abre como link normal, es un pedo de javascript ode ajax n ocreo q sea de php.
Hola Pedro, puedes cambiar la ubicación del texto fácilmente jugando con los DIVs y estilos que componen el layout de la ventana.
Tan sólo necesitas algunos conocimientos de HTML, javascript y css para customizar tu ventana a tu gusto.
Have you seen Visual LightBox, VisualLightBox.com? It
creates all Lightbox code without coding. nice tool! free too.
genial mil gracias me salvo !!!
Genial!