Ajax Lightbox: Una ventana emergente 2.0 en su página web

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

  1. Ajax Lightbox utiliza dos librerías opensource: PrototypeScriptaculous. 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

  2. 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

  1.  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>

  2. 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>

  3. 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.

93 thoughts on “Ajax Lightbox: Una ventana emergente 2.0 en su página web”

  1. 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.

  2. 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

  3. 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

  4. 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.

  5. 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!

  6. 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!!!

  7. 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.

  8. 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

  9. 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

  10. 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..

  11. 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.

  12. 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.

  13. 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?

  14. 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

  15. 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

  16. 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!!!

  17. 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.

  18. 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..

  19. 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!

  20. 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?

  21. 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:

  22. [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

  23. Hey alguien sabe ¿por que cuando subo mis archivos a mi servidor linux no funciona el ajax lightbox? sale espero alguien tenga esa respuesta

  24. 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

  25. 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.

  26. 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *