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. bueno, la verdad q muy bueno tu aporte….. lo q me seria muy util es poderlo usar al enviar un formulario…..nose si es con el onclic, como han mensionado antes… pero con eso estaria hecho….. muchas gracias…

  2. Muy interesante… mi pregunta es la siguiente… quiero presentar un grupo de imagenes pero con un solo link… si yo borro las otras 2 imagenes del grupo de 3.., pues no muentra las demas… espero q me hallan entendido… dime como puedo hacer lo q pido. gracias

  3. Hola, primero, felicidades por el artículo, me ayudó mucho.

    Y para Leandro y otros que lleguen a tener el mismo problema. Cuando llamas un archivo que contiene el lightbox a través de ajax en tu página principal, se bloquea el lightbox y te muestra la imagen sin chiste.
    Para ese caso, lo que tienes que hacer es poner el siguiente código en el thumbnail

    Y listo.
    Saludos

  4. Solo queria felicitarte por tremendo aporte.
    La ventana es simplemente maravillosa. Es muy simple el codigo a insertar, la ventana es rapida y para ponerlo en las fotos de un foro es muy bueno.

    Felicidades y gracias.

  5. Tengo un xml al que llamo desde flash, y quiero que al clickear sobre el thumbnail se despliegue tu sistema como lo inserto en el xml para que quede bien? transcribo script xml :

  6. Excelente código… Tengo una pequeña dificultad: estoy utilizando el rel=”lightbox_text” donde se invoca una página .php que contiene un formulario, cuando el usuari ingresa los datos al presionar el botón enviar, no se ejecuta correctamente y sale una advertencia en la parte inferior izquierda (Erro en la página) se esperaba un objeto linea 91.

    Al ver la linea de codigo, está haciendo referencia a una linea de un embebido de flash .

    Lo anterior no tiene nada que ver con este script, pero es como si no permitiera flash en este tipo de rutina. A alguien le ha ocurrid esto? gracias

  7. [quote comment=”1812″]Muy interesante… mi pregunta es la siguiente… quiero presentar un grupo de imagenes pero con un solo link… si yo borro las otras 2 imagenes del grupo de 3.., pues no muentra las demas… espero q me hallan entendido… dime como puedo hacer lo q pido. gracias[/quote]

    Quiero hacer lo mismo alguien sabe como?

  8. Hola.

    El código tal como está no permite hacer lo que comenta Christian. Sin embargo sería bastante sencillo modificarlo para que aceptara una sintaxis del tipo:

    <a xhref="imagen_1.jpg;imagen_2.jpg;imagen_3.jpg" mce_href="imagen_1.jpg;imagen_2.jpg;imagen_3.jpg" rel="lightbox_group" rel="nofollow">Ver grupo</a>

    El proceso sería similar al resto, lógicamemte para realizar los cambios es necesario tener un conocimiento básico de js.

    Si alguien se anima y tiene tiempo, le animo a que lo intenté y comparta con todos el código.

  9. hola, lei los comentarios y comparto algunos problemas y dudas.

    1.- el cuadrito del lihgtbox no tiene animación, osea, simplemente aparece y ya (claro si hay un desvanecimiento en el fondo negro pero no el el lightbox)

    2.-hay manera de aplicar en lugar de un link a un boton o a un form al submit?

    3.-necesito personalizar el boton de salir, que al darle clic no solo cierre el lightbox sino que ademas haga una funcion en javascript.

    gracias por la ayuda.

    pd. excelente aportación.

  10. Excelente efecto, solo que hay una cosa yo tengo el mismo problema que Leandro, lightbox se bloquea !!! alguien me puede decir como solucionar pero con detalles …………….

    salu2!!!

  11. [quote comment=”1326″]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.[/quote]

    Estoy leendo tus comentarios y parece que en linux no te funciona, pero yo te digo que si fuciona y mucho mejor que en windows, lo que esta pasando es que el .Js no tiene permisos de ejecucion, cambia los permisos a toda la carpeta: chmod -R 755 y deberia de funcionar.

    salu2!!!

  12. Hola alguien sabe como hacer para que se abra el lightbox pero haciendo clik sobre la imagen y no sobre una texto como en mi caso ampliar les dejo el codigo.

    Ampliar

  13. Hola, como puedo hacer para lanzar esta ventana, pero al momento de lanzarla cargar un formulario(otra pagina) y q este pueda ser validado mediante javascript para que por ejemplo no vayan campos vacios?
    porque he probado y lo que sucede es que el javascript es ignorado al lanzar la ventana

  14. hola quería que clickando a una imagen el lugar de una imagen saliera un video eso es posible…??
    muchas gracias

  15. La verdad es que en su momento fue todo un descubrimiento.
    A día de hoy han salido muchas versiones mejoradas de este efecto lightbox.

  16. Que bueno!!! esto lo andaba buscando desde hace como 4 horas pero no encontraba nada =$ hasta que mire tu pos…. haaa me gustaria hacer una pregunta como hago para hacer reportes que muestren torticas barritas con ajax se puede no se en realida nuevo en ensto. o como lo hago es para mostrarlos en un pg en jsp

  17. muy buen tutorial el que has presentado, gracias por el aporte. Yo la verdad soy nuevo en flash y action script….

  18. Saludos, excelente contribucion.
    Tengo una duda, pretendo usarlo para cargar un formulario en el lightbox el cual esta validado con javascript, pero cuando lo cargo, la validacion falla. Alguna idea ?

  19. Yo tengo el mismo problema tengo PAGINA CON UNA FOTO dentro de un IFRAME y quisiera que el efecto se vea en la pagina PADRE _parent…. como puedo solucionar esto? alguien me puede ayudar? por favor

    [quote comment=”430″]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.[/quote]

  20. Hola muy bueno esta utilida..peo tengo un problema a la hora de mostrar un iframe dentro no se adapta el tamaño…

    o alguna ayuda como mostrar iframes concretamente quiero mostra un googlemaps ubicacion

  21. Hola, comentarte que he echo tal como dices pero no me funciona ya he direccionado bien las referencias java.

    te agradeceria que me des una manito.
    mi configuracion quedo de esta forma.

    y bueno mi imagen para direccionar es esto.

    Imagen

  22. gracias por compartir tus conocimientos, solo tengo una pregunta: ¿a alguien le ha fallado el script en IE8? porque a mi me funciona perfecto con firefox, mas sin embargo en internet explorer 8 no me arranca, simplemente me manda anrir un nuevo documento, en una nueva pagina, y no muestra nada de efecto..?

    alguien aber porque?

  23. Hola, Disculpen mi ignorancia pero no entiendo la parte de la activacion. si pueden expicarme con plastilina les agradeceria infinitamente. Gracias

    Activación
    Añada un atributo rel=”lightbox_text” a cualquier enlace que apunte a una página web para activar el efecto:
    Ver nota

    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:
    imagen #1

  24. Agradezco su información, tremendamente sencillo de utilizar,

    me gustaria hacerte un par de pregundas:

    La primera es que eestoy cargando una pagina como el ejemplo de hello google, pero no he podido que me tome la configuración de la fuente de la pagina que cargo en la ventana, ni el color de la fuente,

    la segunda pregunta es que estoya cargando un formulario php y deseo que el fondo osea la pagina principal quede bloqueada hasta que me acepten los datos que muestro en la ventana.

    le agradezco la informacion

  25. Hola… interesantísimo el artículo… la verdad que no me anduvo. Cunado pincho en la imagen pequeña me ofrece la descarga, pero no me muestra el efecto…

    No entiendo esta linea:

    ¿es así?… desde ya muchas gracias

  26. Lamento no poder enviarte un agradecimiento en efectivo, pero con todo, gracias!
    La cosa se ve de lujo!!

  27. Excelente recurso, solo tengo una duda; si quiero llamar múltiples iamgenes solo me deja con 4 en la 5ta de bloquea…por que será?

  28. Hola.

    Antes que nada gracias por tu aporte.

    Tengo algunos problemas al momento de tratar de cargar un documento html con lightbox, he seguido todos los pasos de este tutorial:

    – Descargué las librerías necesarias.
    – Incluí las librerías en el head.
    – Creé el documento .html que deseo mostrar a la misma altura que mi index.html.

    Mi código quedó de la siguiente manera:

    Prueba con Lightbox

    Ayuda

    ¿Alguien puede decirme el porqué no me muestra mi contenido html?

    Gracias.

  29. estimados estoy en un gran lio, estoy utilizando frames en un sitio web al momento de utilizar lightbox funciona perfecto pero solo dentro de las dimensiones del frame, es decir no sobre la pagina principal, alguien sabe como hacerlo para que si estoy navegando en un frame, y presiono el botón para la imagen este quede por sobre los frames y muestra en su totalidad el contenido?

  30. Hola, dime como puedo hacer para que ese lightbox cargue y muestre la pagina de google automáticamente cuando entro a la página? Si me ayudarías te lo agradeseria muchísimo

  31. Muy buen aporte pero no se si a alguen le pase esto. Baje los archivos de este ejemplo y cuando ejecuto el index en Opera,Chrome no me sale el contenido del archivo que jalo con el lightbox_text solo me lo muestra en Safari y Mozilla. en Explorer deplano no me funciona porque habre otra ventana en ves de ejecutar el efecto. A que se debe? lo que pasa es que soy nuevo en esto y me gusto mucho lo quisiera aplicar el un proyecto y poder verlo en 3 exploradores minimo Mozilla,Chrome y Opera.

Deja un comentario

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