Ventanas multimedias en nuestra Web con Shadowbox

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
Diseño > Edición de HTML 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: &quot;0.6&quot;,

});
</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.

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 - CiudadBlogger

1 comentarios:

Anónimo dijo...

pero despues de montado como ponemos por ejemplo un video de youtube?

Publicar un comentario

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika