Ventanas modales con Shadowbox

En un post anterior mostraba cómo insertar un Light box en nuestro blog, ShadowBox es un clon del anterior, pero a su diferencia, éste viene con efectos distintos y a su vez permite contenido multimedia (Vídeos, imágenes, documentos HTML, animaciones flash, entre muchas otras cosas).


Cómo obtener ShadowBox en Blogger:





Primero, vamos a ‘’Diseño/Edición de HTML’’, en donde buscamos </head> y antes de este código pegaremos el siguiente:

<link href='https://sites.google.com/a/blogsydescargas.co.cc/ayudabloggers/scripts/shadowbox.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/a/blogsydescargas.co.cc/ayudabloggers/scripts/shadowbox.js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: "#000",
overlayOpacity: &quot;0.6&quot;,
});
</script>

Guardamos los cambios y listo.

Ahora preparamos los códigos para el tipo de multimedia que deseemos insertar:

Imagen individual:

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

Galería de imágenes:

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

Mapas de Google:

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

Vídeos de Vimeo: 

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

Vídeos de Youtube:

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

Animaciones Flash (Tardará unos segundos):

<a rel="shadowbox;width=400;height=300" title="SWF" href="URL DE LA ANIMACION SWF">Animación SWF</a>

Páginas Web:

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

Recuerda que no se visualizará una imagen en miniatura, sino que el ShadowBox se mostrará en un enlace,  para que en lugar de un enlace aparezca una imágen como en los ejemplos, deberás reemplazar la zona subrayada de cada código por esto:

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

Recuerda que si tienes alguna duda, o quieres aplicarlo a otra cosa, con gusto te facilito el trabajo, no olvides comentar.
.