Lightbox: Imágenes en ventanas modales

Comparteme :

Las ventanas modales son ese efecto cuando una imagen se abre encima de todo el contenido y oscurece toda la pantalla.
Si bien en la actualidad hay muchos sistemas que permiten hacer todo esto vamos a ver al pionero en su tipo, Lightbox.
Esta técnica creada por Lokesh Dhakar dejó atrás a las ventanas popups ya que el efecto es mucho más llamativo debido a la forma que se presenta la imagen. De él han surgido muchos clones como Lightwindow, Thickbox, etc.

Por lo pronto vamos a empezar a usar Lightbox que se encuentra en su versión 2.04 que aunque no soporta ventanas modales para todo tipo de archivos sí funciona muy bien para las galerías de imágenes.

La instalación es muy sencilla sólo necesitamos Prototype, Scriptaculous, Lightwindows.js y el archivo .ccs de los estilos.

Para poner Lightbox en Blogger entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:
NOTA: Si ya tienes Prototype y Scriptaculous sólo añade lo demás.

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->

<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/lightbox.js' type='text/javascript'/>
<link href='http://sites.google.com/site/ciudadbloggerfiles/Home/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>

Ahora cuando quieras que una imagen aparezca en una ventana modal usa este código:

<a href="URL de la imagen" rel="lightbox"><img width="150" src="URL de la imagen" /></a>

Sólo cambia la URL de la imagen las dos veces donde se indica en color rojo, y en la parte azul puedes cambiar el ancho que tendrá la imagen en miniatura. Si te fijas se ha añadido al código rel="lightbox" esa parte es sumamente importante pues es la que le indicará al script que la imagen debe mostrarse en ventana modal.
Si tuvieras una galería de imágenes sólo se añade entre corchetes el nombre de la galería, por ejemplo:

<a href="URL de la imagen" rel="lightbox[galeria1]"><img width="150" src="URL de la imagen" /></a>

Así de sencillo puedes mostrar tus imágenes con este efecto de ventanas modales que a todos les gusta.

Consideraciones:
Lightbox funciona en todos los navegadores aunque las versiones antiguas de Intenet Explorer pueden presentar problemas.
Para que la ventana modal funcione correctamente debes esperar a que la página cargue por completo para asegurar que los archivos ya han sido leídos y pueden ejecutarse.
Tanto el script como la hoja de estilos los he alojado en mi servidor, pero se recomienda que los descargues y los alojes en tu propio hosting para evitar que se sobre cargue el ancho de banda y se alente tu blog.
Una vez que los hayas subido a tu hosting sólo cambia la URL de cada uno de ellos en el primer código que he marcado en color verde.

Demostración

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Lightbox: Imágenes en ventanas modales.

Comparte

BLOGUERO TUTORIAL