LightWindow: Casi casi perfecto

JMiur

¡Epa! ¡Esto sí que funciona muy bien!

Tanto dar vueltas buscando algún tipo de script que permita utilizar algún tipo de ventana modal al estilo VideoBox, LightBox, PopBox o SlimBox que funcione correctamente y que sea lo suficientemente versátil como para permitir mostrar todo tipo de archivos y aquí esta, se llama LightWindow.

¿Por que me parece que esta es mejor que todas las otras que he probado? Porque, entre otras cosas pueden mostrarse:

Click sobre cada ícono para ver una demostración.

Esto de mostrar las cosas en ventanas modales es muy lindo pero también es molesto tener que elegir uno u otro modelo porque cada uno de ellos hace algo diferente, uno para videos, otro para imágenes, ni hablar de compatibilidades. LightWindow tiene la particularidad de poder manejar prácticamente cualquier tipo de archivo multimedia y los detecta automáticamente. Además, es compatible con Firefox, IE6, IE7, Safari y Opera tanto en Windows como en Mac.

La ventana puede personalizarse todo lo que uno quiera y podemos crear galerías con cualquier tipo de archivo, colocar títulos, descripciones, etc.

Primero que nada, descargamos el ZIP

que contiene una serie de archivos y carpetas que incluyen demostraciones varias. De todos ellos, los que necesitamos alojar en un servidor propio son:

prototype.js

scriptaculous.js

effects.js

lightwindow.js

lightwindow.css

Como el framework prototype es de uso bastante común y se emplea para diversas funciones y trucos, si ya lo hemos incluido en nuestra plantilla no deberemos preocuparnos y utilizamos el que tenemos; a lo sumo, verificamos si la versión es adecuada y si no, la reemplazamos por una más nueva. Lo mismo puede decirse de script.aculo.us y de su librería effects.

Los otros dos archivos, lightwindow.js y lightwindow.css son los que nos importan y los que pueden modificarse para adaptarse a nuestras necesidades. Por ejemplo, deberíamos alojar las imágenes utilizadas y cambiar las direcciones de: ajax-loading.gif, black.png, black-70.png, arrow-down.gif, arrow-up.gif, prevlabel.gif y nextlabel.gif.

Si esto resulta complicado, puede descargarse este otro ZIP

que contiene sólo los archivos necesarios y donde ya los he modificado, alojando las imágenes en ImageShack.

Una vez que tenemos alojados los archivos, los incluimos en la plantilla, por ejemplo, justo antes de </head>:

<script type="text/javascript" src="URL_prototype.js"></script>

<script type="text/javascript" src="URL_scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="URL_lightwindow.js"></script>
<link rel="stylesheet" href="URL_lightwindow.css" type="text/css" media="screen" />

Donde cambiamos las direcciones URL por las de nuestros archivos.

El script es muy sencillo de utilizar, basta agregar la clase lightwindow a cualquier enlace, por ejemplo:

<a href="URL_archivo" class="lightwindow">ENLACE</a>

El enlace puede ser un texto, un ícono o una miniatura:

CLICK

En realidad, eso es todo, no hace falta nada más, de manera automática, el script reconocerá el tipo de archivo al que se refiere el enlace y actuará en consecuencia.

Imágenes en formato bmp, gif, jpg, png y tiff
Videos en formato avi, divx, m1v, m2v, mjpg, moov, mov, movie, mpa, mpe, mpeg, mpg, qt, viv, vivo y wmv.
Audio en formato aif, aiff, m2a, m3u, mid, midi, mp2, mp3, mpa, mpg, mpga, ram y wav.
Páginas en formato asp, aspx, cgi, htm, html, pl, php4, php3, php, php5, phtml, rb, rhtml, shtml, txt, y vbs.
Aplicaciones en formato asf, pdf, pps, rm y swf.

Por supuesto, el navegador tendrá que tener los plugins necesarios para verlos y, eventualmente (por ejemplo en el caso del divx), habrá que modificar el script para que cargue los códigos necesarios. En la página principal del proyecto, hay una descripción de las instrucciones utilizadas, los tipos MIME soportados y los plugins y ActiveX establecidos por defecto.

Para crea una galería, el criterio es el mismo, ponemos enlaces a cada uno de los archivo y les agregamos a todos ellos un atributo REL con el mismo valor, por ejemplo:

<a href="URL_archivo1" class="lightwindow" rel="TítuloDemo[Subtítulo]">ENLACE 1</a>
<a href="URL_archivo2" class="lightwindow" rel="TítuloDemo[Subtítulo]">ENLACE 2</a>

<a href="URL_archivo3" class="lightwindow" rel="TítuloDemo[Subtítulo]">ENLACE 3</a>

Y si sólo queremos mostrar un enlace:

<a href="URL_archivo1" class="lightwindow" rel="TítuloDemo[Subtítulo]">ENLACE</a>

<a href="URL_archivo2" class="lightwindow" rel="TítuloDemo[Subtítulo]"></a>
<a href="URL_archivo3" class="lightwindow" rel="TítuloDemo[Subtítulo]"></a>

Si bien la forma sencilla es agregar la clase lightwindow al enlace, hay otras propiedades con las que podemos personalizar cada enlace, para esto, usamos el atributo PARAMS:

<a class="lightwindow" href="URL_arhivo" params="lista de parámetros">ENLACE</a>

Los parámetros que podemos usar son:

lightwindow_width es el ancho de la ventana (en pixeles)

lightwindow_height es el alto de la ventana (en pixeles)

lightwindow_top es la distancia entre el borde superior de la pantalla y el inicio de la ventana

lightwindow_left es la distancia entre el borde izquierdo de la pantalla y el inicio de la ventana

lightwindow_loading_animation se establece en false para no mostrar el efecto fade al cargarse

EJEMPLO: Una ventana de 400 x 326 para contener un video de Google Videos [CLICK]

Otros parámetros son específicos para casos especiales:

lightwindow_show_images indica la cantidad de imágenes a mostrar simultáneamente en una galería (el valor por defecto es 1)

lightwindow_type es optativo e indica cómo debe ser interpretado el enlace (page, external, image, media, inline)

lightwindow_iframe_embed se utiliza para incrustar el medio dentro de un IFRAME en lugar de un DIV

lightwindow_form indica el nombre si estamos utilizando el script para mostrar un formulario

Si queremos usar varios parámetros, los separamos por comas, por ejemplo:

params=lightwindow_width=425,lightwindow_height=350,lightwindow_loading_animation=true"

params="lightwindow_width=500,lightwindow_height=500,lightwindow_show_images=2"

Otros atributos especiales son también opcionales: title, author y caption se utilizan para mostrar determinados textos.

<a class="lightwindow" href="URL_archivo"
title="unTexto"
caption="unTexto"
author="unTexto"
params="lista de parámetros">ENLACE</a>

EJEMPLO: donde se muestran los tres atributos [CLICK]

También podemos colocar contenido inline ¿qué es esto? Pués podemos mostrar algo que tenemos en nuestra propia página o post, algo que "ocultamos" y sólo mostramos a través de un enlace:

<a href="#nombreID"  class="lightwindow">ENLACE</a>
<div id="nombreID" style="display: none;">

<div>... cualquier contenido HTML ...</div>
</div>

EJEMPLO: donde se muestra un DIV oculto [CLICK]

Algunas propiedades que pueden personalizarse:

#lightwindow_title_bar el área superior donde se muestra el atributo TITLE y el enlace que permite cerrar la ventana

#lightwindow_title_bar_title es el texto del atributo TITLE

#lightwindow_title_bar_close_link es el enlace con el texto "close"

#lightwindow_data_caption es el texto del atributo CAPTION

#lightwindow_data_author es el texto del atributo AUTHOR

Esto lo podemos hacer modificando el archivo lightwindow.css o sobrescribiéndolo en nuestra plantilla, agregando una etiqueta STYLE inmediantamente después del enlace a la hoja de estilo:

<link rel="stylesheet" href="URL_lightwindow.css" type="text/css" media="screen" />
<style type='text/css'>
#lightwindow_title_bar_title { ... }
a#lightwindow_title_bar_close_link, a:link#lightwindow_title_bar_close_link, 
a:visited#lightwindow_title_bar_close_link { ... }
a:hover#lightwindow_title_bar_close_link,  a:active#lightwindow_title_bar_close_link { ... }
#lightwindow_data_caption { ... }
#lightwindow_data_author { ... }
</style>