Shadowbox: ventanas modales multimedia con imágenes

Comparteme :

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 galerías, mapas, y videos en varios formatos de distintos servicios.
Luego entra en Plantilla | Edición de HTML y pega antes de </head> lo siguiente:

Efecto con borde:

<!-- Ventana modal -->
<link href='https://sites.google.com/site/archivosjava/archivos-js/blccbx.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/archivosjava/archivos-js/bljjShadowbx1.js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: &quot;#000&quot;,
overlayOpacity: &quot;0.6&quot;,
});
</script>
<!-- ventana modal -->

Efecto sin borde:

<!-- ventana modal -->
<link href='https://dl.dropboxusercontent.com/s/m6y5b6zblpq77uq/shadowboxventanamodal.css' rel='stylesheet' type='text/css'/>
<script src='https://dl.dropboxusercontent.com/s/bhxuikill5rqiil/shadowboxventanamodal.js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: &quot;#000&quot;,
overlayOpacity: &quot;0.6&quot;,
});
</script>
<!-- ventana modal -->

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:

Imágenes

<a href="URL de la imagen" rel="shadowbox" title="Imagen"><img style="width:150px; height:100px;" src="URL de la imagen" /></a>

La sección NARANJA puedes cambiarlo a tu gusto tanto color como el tamaño de la imagen
El color ROJO es para la URL de la imagen y el titulo TOOLTIPS.

Galería de imágenes

<a href="URL de la imagen" rel="shadowbox[galeria1]" title="Imagen"><img style="width:150px; height:100px;" src="URL de la imagen" /></a>

<a href="URL de la imagen" rel="shadowbox[galeria1]" title="Imagen"><img style="width:150px; height:100px;" src="URL de la imagen" /></a>

De igual forma que la primera, la sección NARANJA puedes cambiarlo a tu gusto tanto color como el tamaño de la imagen
El color ROJO es para la URL de la imagen y el titulo TOOLTIPS.

YouTube

<a rel="shadowbox;width=405;height=340;" title="Titulo de YouTube" href="http://www.youtube.com/v/CCwVb9Faxdc&rel=0&autoplay=1"><img style="width:150px; height:100px;" src="URL de la imagen" /></a>

De igual forma que la segunda, la sección NARANJA puedes cambiarlo a tu gusto tanto color como el tamaño de la imagen o video youtube
El color ROJO es para la URL de la imagen y código del video y el titulo TOOLTIPS.

Vimeo

<a rel="shadowbox;width=405;height=340;" title="Titulo del video Vimeo" href="http://vimeo.com/moogaloop.swf?clip_id=8711928&autoplay=1"><img style="width:150px; height:100px;" src="URL de la imagen" /></a>

De igual forma que la segunda, la sección NARANJA puedes cambiarlo a tu gusto tanto color como el tamaño de la imagen o video vimeo
El color ROJO es para la URL de la imagen, código del video y el titulo TOOLTIPS.

Cambia la URL de la imagen 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 si deseas que no se muestren las imágenes simplemente quitamos el código siguiente y sustitúyelo con un el texto de tu preferencia :

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

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í ?

Shadowbox: ventanas modales multimedia con imágenes .

Comparte

BLOGUERO TUTORIAL