Ventanas modales con Shadowbox

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.
.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger