LightWindow, muestra diálogos con la información que quieras

Una de las mejores librerías en javascript que e visto hasta hoy, de las muchas que existen. Ya hemos tratado aquí varias diferentes, ¿cual es el punto especial de LightWindow?. Pues son varios pero sobre todo destacan 3: Que ha sido testeada en FireFox, IE6, IE7, Safari3 y Opera corriendo bajo Windows así como en FireFox, Safari, Opera y Netscape corriendo bajo Mac. La multitud de cosas que podemos mostrar con sus diálogos: imágenes (una o varias), swf, páginas externas, páginas alojadas en nuestro servidor, formularios etc etc. Y finalmente la simplicidad de instalación (esto siempre relativo que depende de los conocimientos del que lo quiera usar).

Para mostrar un poco su funcionamiento y lo que se puede hacer con esta librería vamos a ver como implementar 4 acciones: Abrir una página de Internet en un dialogo, mostrar un .html, cargar una imagen y cargar varias imágenes.
*Para seguir los ejemplos que haremos aquí descargar este pack.

El paquete está formado por 4 carpetas y dos archivos html. Dentro de css vemos las hojas necesarias, lightwindow.css esta imprescindible y galeria.css la que yo e hecho para los ejemplos. En javascript se encuentran las tres librerías. Images contiene la imagen para el preload de los archivos que carguemos, los cursores adelante y atrás y el fondo. Finalmente gallery contiene las imágenes para hacer los ejemplos.

Como se han hecho los ejemplos:

Primero se creó el pack que veis y ya hemos comentado lo que contiene, después vino el index.html en el que se llamaron todos los archivos necesarios (las hojas de estilo y las tres librerías) entre head /head:

[html]




[/html]

Entre body /body la primera línea es el cajón que contendrá todos los ejemplos:

[html]

[/html]

Seguido un titulo y el primer ejemplo de cómo cargar una página externa:

[html]

diarioTHC externo


[/html]

Con href indicamos que página queremos abrir en el dialogo, en class primero llamamos a lightwindow y page-option que da estilo a los “cajones”, title será el texto que aparezca en la esquina superior izquierda y caption una pequeña descripción que se muestra en la esquina inferior izquierda. Ver DEMO

La siguiente línea abre un archivo .html:

[html]

Texto en un html externo

[/html]

Todo igual que antes, pero llamamos la página blank-width.html
*Nota: en galeria.css la última instrucción es:

[html]
p {
margin: 0 0 20px 0;
color: #cccccc;
line-height: 140%;
}
[/html]

Necesario para que el texto se vea en condiciones. Ver DEMO

Continuamos viendo index.html, se llama otro titulo, lo siguiente es la línea para mostrar una imagen en dialogo externo:

[html]

Una sola Imagen

[/html]

La construcción es la misma que en los ejemplos de antes, solamente se añade author que mostrará información de el autor cuando salte el dialogo. Ver DEMO

Seguidamente vemos varias líneas, son las que hacen posible la construcción de una pequeña galería:

[html]

Varias imagenes

image #1

image #2

image #3

image #4
[/html]

Si nos fijamos, todo es igual que en el resto, solo cambia el añadido rel que sirve para darle un nombre a nuestra galería y concatenar todas las imágenes que la forman y en el class de las cuatro ultimas imágenes que se le pasa hidden en vez de page-options. Finalmente se cierra el div y el resto de etiquetas. Ver DEMO.

En el sito oficial tenemos todos los ejemplos que se pueden hacer con la librería y un pack con todos.

¡Comparte!

6 thoughts on “LightWindow, muestra diálogos con la información que quieras

  1. Sergio Gil

    Hola !

    Implemente lightwindow en mi blog, para ver videos en la función de galerias, pero no se porque no puedo ver los links PREV Y NEXT..

    Podrían ayudarme ?

    Gracias

  2. Emiliano

    Esos dos botones son invisibles (no sé si sabías) al ponerte cerca de su ubicación aparecen (p.e. de la mitad hacia la derecha, y en lo posible hacia la punta superior, va a aparecer el NEXT, y el PREV aparecerá de la mitad a la izquierda). Si editás el lightwindow.JS o el CSS podés ponerlos simpre visibles.
    Espero haya ayudado en algo.
    Abrazos

  3. Mario

    Hola, me ha gustado mucho el articulo. Estaba intentando descargar el ejemplo para hacer mis pruebas, pero la url está rota. Tampoco funciona la página del sitio oficial.

    ¿Habría manera de que volvieras a subir el pack con los ejemplos? El que realmente me interesa es el que muestra un sitio web. Me parece impresionante.

    Muchas gracias.

  4. MyR Entrada de autor

    La web está abandonada, y los ejemplos subidos tampoco van. Te dejo la galería de ejemplo, con todas las librerías necesarias en este enlace. Espero que te sirva.

    Ahora bien, actualmente hay sistemas mucho más sencillos y elaborados, si buscas librerías modernas jQuery y otras encontrarás verdaderas virguerías.

  5. onintza

    Hola!!!

    Tu tutorial es genial!

    Necesitaría que me echaras una mano. Tengo un flash que quiero cargar en mi página de inicio de mi web site. En esa página de inicio tengo muchas más cosas pero quiero incorporar un flash con una galería de imágenes que cuando clicas sobre ada una de las imágenes tenga el efecto lightwindow y se oscurezca el fondo para dejar ver sólo en grande la foto correspondiente.

    El flash lo tengo Ok con un scroll horizontal que funciona sin problemas pero no consigo incrustar en mi index.html el código correcto para que el lighwindow funcione.

    Si te paso todo el código que tengo actualmente en mi index le podrías echar un vistazo y decirme donde incrustar la parte del lightwindw?

    Mil gracias!!!

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>