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:
-
<link href="css/galeria.css" rel="stylesheet" type="text/css" />
-
<link href="css/lightwindow.css" rel="stylesheet" type="text/css" />
-
-
<script type="text/javascript" src="javascript/prototype.js"></script>
-
<script type="text/javascript" src="javascript/effects.js"></script>
-
<script type="text/javascript" src="javascript/lightwindow.js"></script>
Entre body /body la primera línea es el cajón que contendrá todos los ejemplos:
-
<p id="cajon-general">
Seguido un titulo y el primer ejemplo de cómo cargar una página externa:
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:
Todo igual que antes, pero llamamos la página blank-width.html
*Nota: en galeria.css la última instrucción es:
-
p {
-
margin: 0 0 20px 0;
-
color: #cccccc;
-
line-height: 140%;
-
}
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:
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:
-
-
<a href="gallery/2-evolution.jpg?phpMyAdmin=JTM06PkZm21RcPh-da2-FZy70a7&phpMyAdmin=rp%2CvLPHOvuIWmaU9OYGelfb0h76" class="lightwindow hidden" rel="Evolucion hombre[Imagenes de la evolucion]" title="Evolucion humana" caption="2" author="diarioTHC">image #1</a>
-
-
<a href="gallery/3-evolution.jpg?phpMyAdmin=JTM06PkZm21RcPh-da2-FZy70a7&phpMyAdmin=rp%2CvLPHOvuIWmaU9OYGelfb0h76" class="lightwindow hidden" rel="Evolucion hombre[Imagenes de la evolucion]" title="Evolucion humana" caption="3" author="diarioTHC">image #2</a>
-
-
<a href="gallery/4-evolution.jpg?phpMyAdmin=JTM06PkZm21RcPh-da2-FZy70a7&phpMyAdmin=rp%2CvLPHOvuIWmaU9OYGelfb0h76" class="lightwindow hidden" rel="Evolucion hombre[Imagenes de la evolucion]" title="Evolucion humana" caption="4" author="diarioTHC">image #3</a>
-
-
<a href="gallery/5-evolution.jpg?phpMyAdmin=JTM06PkZm21RcPh-da2-FZy70a7&phpMyAdmin=rp%2CvLPHOvuIWmaU9OYGelfb0h76" class="lightwindow hidden" rel="Evolucion hombre[Imagenes de la evolucion]" title="Evolucion humana" caption="5" author="diarioTHC">image #4</a>
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.
Posts relacionados
- Elimina las estrellas y el título de los videos de Youtube
- Los 10 principios de la usabilidad
- Crear un Sitemap de Google
2 Comentarios
Deja un comentario
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
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