Ventana modal para el blog: "LigthWindow"

Si habéis abierto alguna imagen del blog (a partir del articulo "La imaginación de los niños", iré implementando el script en las que sean para el caso), para verla en su tamaño original, os habréis percatado de que esta se abre en una ventana modal, es decir que mediante un script la imagen se amplía superpuesta a la página con la posibilidad de cerrarla en cualquier momento y seguir navegando, sin necesidad de abrir otra pagina u otra pestaña para ver la foto. Como una ventana emergente al fin y al cabo pero con un diseño mucho mas alegre y con la posibilidad de usarlo no solo para imágenes únicas sino para galerías enteras y otros formatos como videos, documentos u otras páginas.

Para poder utilizar este script en tu propio blog, necesitas una serie de archivos en formato javascript que deberás alojarlo en algún servidor externo para poder utilizarlo. Los archivos en cuestión son effects.js, prototype.js, scriptaculous.js, lightwindow.js y lightwindow.css. Este último definirá el estilo con todos sus atributos de la ventana modal. Os dejo los archivos para su descarga.

Decir que estos archivos están modificados para que la interfaz de las ventanas salieran en español, como por ejemplo la opción de cerrar, el comando cancelar o cargando y el botón de galerías, además de haber cambiado la dirección de las imágenes que utiliza el script poniéndolas a mi cuenta en Imageshack, si queréis modificarlo deberéis cambiarlo en los archivos lightwindow.js y lightwindow.css en los que tendréis que buscar las rutas correspondientes a las imágenes incluidas en este archivo comprimido y cambiarlas por la dirección donde las tengáis alojadas.

Sin más y después de haber alojado los archivos en un servidor deberéis incluir antes de </head> el siguiente código.

<script src='URL_DEL_ARCHIVO_PROTOTYPE.JS' type='text/javascript'/>
<script src='URL_DEL_ARCHIVO_SCRIPTACULOUS.JS?load=effects' type='text/javascript'/>
<script src='URL_DEL_ARCHIVO_LIGHTWINDOW.JS' type='text/javascript'/>
<link href='URL_DEL_ARCHIVO_LIGHTWINDOW.CSS' media='screen' rel='stylesheet' type='text/css'/>

Una vez hecho esto únicamente para que vuestros lectores puedan beneficiarse de la ventana modal deberéis incluir en vuestros enlaces.

<a href="URL_ARCHIVO" class="lightwindow"> TEXTO, IMAGEN, ICONOS…</a>

Para hacer una galería, el método es similar, simplemente añadimos enlaces a cada uno de los archivo y les agregamos a todos ellos un atributo REL con el mismo valor.

<a href="URL_ARCHIVO1" class="lightwindow" rel="Título[Subtítulo]">ENLACE 1</a>
<a href="URL_ARCHIVO2" class="lightwindow" rel="Título[Subtítulo]">ENLACE 2</a>
<a href="URL_ARCHIVO3" class="lightwindow" rel="Título[Subtítulo]">ENLACE 3</a>

Y si sólo queremos mostrar un enlace.

<a href="URL_ARCHIVO1" class="lightwindow" rel="Título[Subtítulo]">ENLACE </a>
<a href="URL_ARCHIVO2" class="lightwindow" rel="Título[Subtítulo]"></a>
<a href="URL_ARCHIVO3" class="lightwindow" rel="Título[Subtítulo]"></a>

Puntualizo que para implementar los videos de YouTube debeis hacerlo especificando el alto y el ancho de esta manera.

<a href="URL_DEL_VIDEO" class="lightwindow" params="lightwindow_width=425, lightwindow_height=350, lightwindow_loading_animation=true" title="" rel="">ENLACE</a>

Dispone también de otras opciones especiales no siendo necesarias incluirlas siempre pero si os interesa podéis modificar el title, author y caption que se utilizan para mostrar determinados textos.

<a class="lightwindow" href="URL_ARCHIVO"
title="TITULO_DEL_ARCHIVO"
caption="DESCRIPCION_DEL_ARCHIVO"
author="TITULO_DEL_AUTOR"
params="lista de parámetros">ENLACE</a>

Con todo esto ya tenemos suficiente para poder ver nuestras imágenes o galerías en una ventanita modal. Para más información detallada podéis visitar la página de la fuente de la información.

Si tenéis alguna duda o les surge algún problema no dudéis en comentarlo y no está de más antes de hacer cualquier cambio en vuestra plantilla hacer una copia de seguridad.

Fuente: Vagabundia