Instala ventanas modales recomendados por Ciudad Blogger

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Shadowbox es un clon de Lightbox, pero a diferencia de éste no sólo sirve para visualizar imágenes en ventanas modales,sino también páginas web, archivos en flash, galerías, mapas, y videos en varios formatos de distintos servicios.

Implementarlo es bastante sencillo, primero descarga este archivo, descomprímelo y sube los archivos a un hosting.

Luego entra en Plantilla | Edición de HTMLL y pega antes de </head> lo siguiente:

<link href='URL del archivo.css' rel='stylesheet' type='text/css'/>
< script src='URL del archivo.js' type='text/javascript'/>
< script type='text/javascript'>
Shadowbox.init({
overlayColor: "#000",
overlayOpacity: "0.6",
});
< /script>

Cambia lo que está en color verde por las URL de los archivos que subiste, en el primero va la URL del achivo shadowbox.css y en el segundo la del shadowbox.js

Con esto ya tenemos todo lo necesario para que Shadowbox funcione, ahora sólo hay que poner el atributo rel="shadowbox" dentro del código del elemento, por ejemplo:

Imagen

<a href="URL de la imagen" rel="shadowbox" title="Imagen">Imagen</a>

Galería de imágenes

<a href="URL de la imagen" rel="shadowbox[galeria1]" title="Imagen">Imagen 1</a>
< a href="URL de la imagen" rel="shadowbox[galeria1]" title="Imagen">Imagen 2</a>

YouTube

<a rel="shadowbox;width=405;height=340;" title="YouTube" href="http://www.youtube.com/v/CCwVb9Faxdc&amp;rel=0&amp;autoplay=1">YouTube</a>

Vimeo

<a rel="shadowbox;width=405;height=340;" title="Vimeo" href="http://vimeo.com/moogaloop.swf?clip_id=8711928&amp;autoplay=1">Vimeo</a>

Video Google

<a href="http://video.google.com/googleplayer.swf?docid=-1941725100819420671&autoplay=1&hl=es&fs=true" title="Video Google" rel="shadowbox;width=405;height=340">Video Google</a>

Archivo SWF

<a rel="shadowbox;width=400;height=300" title="SWF" href="URL del archivo.swf">Animación SWF</a>

Página Web

<a rel="shadowbox;width=700;height=500" title="Página web" href="URL de la página">Página web</a>

Mapa

<a rel="shadowbox;width=425;height=350" title="Mapa" href="URL del mapa">Mapa Google</a>

Cambia la URL de la imagen, del mapa, del archivo o de la página web, según corresponda.
En el caso de los videos sólo hay que agregar donde está en color rojo la ID del video, esa aparece al final de la dirección del video.

Como ven, en el atributo rel="shadowbox" también se han añadido unos parámetros, width=405 es el ancho del reproductor o página web y height=340 es el alto.
En el caso de las galerías de imágenes se agrega entre corchetes el nombre de la galería, por ejemplo rel="shadowbox[galeria1]"

Respecto al color de la pantalla cuando está en ventana modal puede cambiarse en el primer código que pegamos antes de </head> donde está en color azul, overlayColor es el color de la pantalla, y overlayOpacity es la intensidad de la opacidad del color, un número más bajo hace más transparente el color.

En todos los casos no se mostrará una imagen en miniatura como en mis ejemplos sino que se mostrará un enlace de texto, si quieres que también sean miniaturas en lugar del texto sólo busca la parte del código que es texto subrayado y cámbialo por este código:

<img style="width:150px; height:100px;" src="URL de la imagen" />

Ahí deberás poner la URL de la imagen que quieres que aparezca en miniatura, no es automático así que habrá que hacerlas manualmente.

Sin duda Shadowbox es un sistema de ventanas modales bastante completo en el que podremos presentar distintos archivos multimedia de forma más dinámica y elegante.

Descargar | archivos Shadowbox
Enlace | Shadowbox