Ajax
Ajax Lightbox: Una ventana emergente 2.0 en su página web
Enviar a un amigo
⋅ 
Imprimir este artículo
⋅ 
Escribir un comentario
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.
Artículos relacionados:
- Ajax zoomy: Un Ajax lightbox para su galería de imágenes
- Real Ajax Sexy Curls: Una forma elegante de mostrar el código fuente de nuestra página
- AJAX Accesible para Google: Posicionar contenido en Ajax
- Selector combo dinámico en Ajax: localidades y provincias de España
- Cómo posicionar su página web en Google en 2 semanas
Si te ha gustado este artículo y te ha sido de utilidad, Haz una Donación y colobora en el mantenimiento de esta blog.
Cada artículo está escrito con esfuerzo y dedicación, ayúdame a seguir ayudándote.
Comentarios
70 comentarios para “Ajax Lightbox: Una ventana emergente 2.0 en su página web”
Escribir un comentario
Atención, todos los artículos de hellogoogle.com están bajo una
licencia de Creative Commons.
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 ..
[...] 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’”. [...]
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:
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!
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…
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
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
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.
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 :
una pregunta y se puede utilizar para cargar algun fihcero como un html? osea habir un .html con este mismo sistema?
Sí claro, sin problema.
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
Quiero hacer lo mismo alguien sabe como?
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.
Hola Ignacio G., use este plugin y solucione mi problema.
http://www.shadowbox-js.com/index.html
Basicamente, lo que hace es usar una clase en css que oculta las imagenes.
.ocultar
{
display:none;
}
Por ejemplo:
Declaramos la imagen aplicando a partir de la segunda la clase(css) hidden.
Has click aqui
Espero les sirva.
Christian
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.
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!!!
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!!!
Gracias ¡¡ , Justo este efecto necesito..Gracias Otra vez
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
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
hola quería que clickando a una imagen el lugar de una imagen saliera un video eso es posible…??
muchas gracias
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.
[...] LightBox2 [...]