Crea ventanas modales o pequeñas galerías (miniaturas) para entradas o portada del blog.

Este artículo fue publicado en el Balcón de Jaime por Jaime Trujillo Escobedo. Para verlo en su blog original

visitar: http://elbalcondejaime.blogspot.com/2010/11/ventanas-modales-para-mostrar-cualquier.html

Este clon de Lightbox conocido como Shadowbox nos permite, a diferencia del primero, abrir en ventanas modales tanto imágenes como páginas web, vídeos e incluso archivos en flash (como juegos).

Una herramienta con un sin fin de usos y de fácil instalación con la que podrás presentar en tu blog cualquier cosa sin hacer que éste se retrase al cargar el contenido.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y justo encima añade estos scripts:

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

Si lo deseas, puedes descargar el script que hace funcionar la ventana modal (bljjShadowbx1.js), así como las propiedades css y alojarlo en tu propio hosting para, posteriormente, incluir la dirección del nuevo archivo subido en el código (borrando antes la actual).

Guarda la plantilla.

Con esto ya tendremos implementado lo necesario en nuestra plantilla. Ahora tan tendrás que incluir el código necesario para mostrar cada elemento en una entrada o en un gadget html-javascript del apartado de Diseño>Elementos de la página de tu blog.

Una imagen

<a title="TITULO" rel="shadowbox" href="URL DE LA IMAGEN"><img src="URL DE LA IMAGEN" style="width: 100px;"></a>

Una galería de imágenes

<a href="URL DE LA IMAGEN 1" rel="shadowbox[blgal1]" title="TITULO"><img style="width:100px;" src="URL DE LA IMAGEN 1"/></a>

<a href="URL DE LA IMAGEN 2" rel="shadowbox[blgal1]" title="TITULO"><img style="width:100px;" src="URL DE LA IMAGEN 2"/></a>

Un vídeo de YouTube

<a rel="shadowbox;width=405;height=340;" title="YouTube" href="http://www.youtube.com/v/XT6XPHXK4e4&rel=0&autoplay=1">Ver el vídeo</a>

Un archivo SWF (como un minijuego -archivos Flash-):

<a rel="shadowbox;width=400;height=300" title="SWF" href="URL DEL ARCHIVO SWF">TITULO DEL ENLACE</a>

Una página web:

<a rel="shadowbox;width=700;height=500" title="TITULO" href="URL DE LA PAGINA">TITULO DEL ENLACE</a>

Reemplaza cuando sea necesario:

URL DE LA IMAGEN por la dirección de tu imagen (imágenes si se trata de una galería), TITULO DEL ENLACE por el texto que aparecerá en el enlace que abre la ventana modal (puedes utilizar una imagen en lugar de texto incluyendo esta línea de código: <img src="URL DE TU IMAGEN"/> e insertando la dirección de la imagen en miniatura que actuará como botón).

Cuando vayas a incluir una galería en tu blog, ten en cuenta que el atributo rel="shadowbox[blgal1]" pertenece a una galería, blgal1, por lo que las nuevas imágenes que incluyas utilizando este nombre aparecerán junto a las anteriormente publicadas. Para evitarlo, edita blgal1 tantas veces como desees de manera que puedas agrupar imágenes por separado en una galería (blgal1) o en otra (blgal2).

Las cifras del vídeo de YouTube (XT6XPHXK4e4) deben sustituirse por los carácteres que aparecen al final de la dirección del vídeo que has escogido.

En URL DEL ARCHIVO SWF incluye la dirección del archivo .swf que obtendrás al haberlo alojado en tu propio hosting.

Agrega la dirección de cualquier página web en URL DE LA PAGINA (siempre con el http://).
Este artículo fue publicado en el Balcón de Jaime por Jaime Trujillo Escobedo. Para verlo en su blog original visitar: http://elbalcondejaime.blogspot.com/2010/11/ventanas-modales-para-mostrar-cualquier.html

Gracias por tu visita al Blogger Magazine, las últimas novedades de los mejores maestros bloggers.