Abrir ventana al cargar el blog con Shadowbox
Abrir ventana al cargar el blog con Shadowbox
Abrir ventana al cargar el blog con Shadowbox
Desde que vimos cómo usar ventanas modales con Shadowbox muchos son los que han tenido la inquietud por saber cómo hacer que estas ventanas modales puedan abrirse al cargar el blogsin necesidad de hacer click en ningún enlace, tal como han podido verlo an ingresar a esta entrada.
Éstas pueden resultar muy útiles para mostrar publicidad, avisos, recordatorios, o cualquier cosa que pondríamos en una ventana popup pero con la elegancia que Shadowbox sabe dar.
Si no tienes Shadowbox primero sigue los pasos de instalación que se explican en esta entrada.
Y luego, ya que lo tengas puesto, o si ya lo usas desde antes, sólo agrega antes de </head> lo siguiente:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
// <![CDATA[
Shadowbox.init({
language: "es",
players: ['html']
});
function AlertMessage()
{
Shadowbox.open({
player: 'html',
content: 'Código HTML de lo que se mostrará',
height: 300, // Alto de la ventana modal
width: 500 // Ancho de la ventana modal
});
}
setTimeout('Shadowbox.close()', 10000);
window.onload = AlertMessage;
// ]]>
</script>
</b:if>
Por último sólo hay que colocar lo que queremos mostrar, eso se agrega en donde se indica en color azul. Si quieres agregar una imagen con enlace, o una animación en Flash (SWF), etc. entonces sólo agrega en donde se indica en color azul el código HTML de lo que quieres mostrar.
Por ejemplo, si quieres mostrar una imagen en la ventana modal entonces sólo agrega el código normal que usarías en una imagen:
<a href="URL del enlace" target="_blank"><img src="URL de la imagen"/></a>
O si fuera una DIV con un texto, o algo más elaborado entonces sería así, por ejemplo:
<div style="padding:20px; color:#fff;">Lorem ipsum dolor sit amet</div>
Y lo mismo sería si quisieras mostrar un archivo en Flash (SWF), sólo agrega el código correspondiente y listo.
Luego, en color verde se indica dónde se cambia el ancho y alto de la ventana modal.
La línea en color rojo es para que la ventana se cierre sola en determinado tiempo, sino quieres que se cierre automáticamente entonces elimínala, pero si quieres que sí se cierre sola entonces ahí puedes cambiarle el tiempo que permanecerá abierta en milisegundos (se cambia el número en negrita), así como está tardará abierta 10 segundos.
Pero ojo, no son 10 segundos desde que aparece la ventana modal sino desde que se ingresa al blog, así que si tu blog es muy tardado y la ventana modal tarda un poco en cargar entonces podrá verse por menos tiempo o si es mucho el tiempo de carga simplemente no se verá.
También se puede mostrar contenido un poco más "complejo", aunque éste método no funciona del todo bien en Google Chrome. Aun así, si lo quieres hacer, deberás crear un documento HTML que incluirá todo lo que quieres mostrar, será como una mini página Web.
Para ello abre el Bloc de notas y dentro de él pega esto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
...Aquí van los estilos CSS...
</style>
</head>
<body>
...Aquí pegamos el contenido que queremos mostrar...
</body>
</html>
Ahí donde se indica pega el contenido que quieres, y si requiere de estilos se colocan donde se indica también.
Cuando termines ve a Archivo | Guardar como... y ponle el nombre popup.html o con cualquier otro nombre pero al final deberá decir .html
Luego cambia el Tipo a Todos los archivos, y dale Guardar.
Con esto lo estaremos guardando en formato de página Web, así que probablemente te aparezca un mensaje de advertencia donde te dirá que estás guardando el archivo en otro formato, sólo da click en Sí para guardar el archivo.
Sube ese archivo HTML a un hosting y obtén su URL, esa URL es la que pondrás en donde se indica en color azul.
Y donde dice player: 'html', cámbialo por player: 'iframe',
Puede parecer complicado esto último de armar el contenido "complejo" pero no lo es tanto, obviamente si no estás muy familiarizado (a) con el HTML lo mejor es poner algo muy sencillo como la URL de una imagen y problema resuelto.
Es importante aclarar (porque sé que me lo preguntarán) que no se mostrará una vez y ya, sino que se mostrará sólo en la portada del blog. Si quieras que se muestre en cualquier parte del blog entonces elimina la primera y última línea del código que están en cursiva.
Si quisieras que sólo se muestre en las páginas estáticas, o sólo en las entradas, o en una parte específica del blog entonces elimina de igual modo la primera y última línea y en su lugar pon las líneas del código condicional que sea más apropiado para ti.
Shadowbox: ventanas modales multimedia
Desde que vimos cómo usar ventanas modales con Shadowbox muchos son los que han tenido la inquietud por saber cómo hacer que estas ventanas modales puedan abrirse al cargar el blogsin necesidad de hacer click en ningún enlace, tal como han podido verlo an ingresar a esta entrada.
Éstas pueden resultar muy útiles para mostrar publicidad, avisos, recordatorios, o cualquier cosa que pondríamos en una ventana popup pero con la elegancia que Shadowbox sabe dar.
Si no tienes Shadowbox primero sigue los pasos de instalación que se explican en esta entrada.
Y luego, ya que lo tengas puesto, o si ya lo usas desde antes, sólo agrega antes de </head> lo siguiente:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
// <![CDATA[
Shadowbox.init({
language: "es",
players: ['html']
});
function AlertMessage()
{
Shadowbox.open({
player: 'html',
content: 'Código HTML de lo que se mostrará',
height: 300, // Alto de la ventana modal
width: 500 // Ancho de la ventana modal
});
}
setTimeout('Shadowbox.close()', 10000);
window.onload = AlertMessage;
// ]]>
</script>
</b:if>
Por último sólo hay que colocar lo que queremos mostrar, eso se agrega en donde se indica en color azul. Si quieres agregar una imagen con enlace, o una animación en Flash (SWF), etc. entonces sólo agrega en donde se indica en color azul el código HTML de lo que quieres mostrar.
Por ejemplo, si quieres mostrar una imagen en la ventana modal entonces sólo agrega el código normal que usarías en una imagen:
<a href="URL del enlace" target="_blank"><img src="URL de la imagen"/></a>
O si fuera una DIV con un texto, o algo más elaborado entonces sería así, por ejemplo:
<div style="padding:20px; color:#fff;">Lorem ipsum dolor sit amet</div>
Y lo mismo sería si quisieras mostrar un archivo en Flash (SWF), sólo agrega el código correspondiente y listo.
Luego, en color verde se indica dónde se cambia el ancho y alto de la ventana modal.
La línea en color rojo es para que la ventana se cierre sola en determinado tiempo, sino quieres que se cierre automáticamente entonces elimínala, pero si quieres que sí se cierre sola entonces ahí puedes cambiarle el tiempo que permanecerá abierta en milisegundos (se cambia el número en negrita), así como está tardará abierta 10 segundos.
Pero ojo, no son 10 segundos desde que aparece la ventana modal sino desde que se ingresa al blog, así que si tu blog es muy tardado y la ventana modal tarda un poco en cargar entonces podrá verse por menos tiempo o si es mucho el tiempo de carga simplemente no se verá.
También se puede mostrar contenido un poco más "complejo", aunque éste método no funciona del todo bien en Google Chrome. Aun así, si lo quieres hacer, deberás crear un documento HTML que incluirá todo lo que quieres mostrar, será como una mini página Web.
Para ello abre el Bloc de notas y dentro de él pega esto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
...Aquí van los estilos CSS...
</style>
</head>
<body>
...Aquí pegamos el contenido que queremos mostrar...
</body>
</html>
Ahí donde se indica pega el contenido que quieres, y si requiere de estilos se colocan donde se indica también.
Cuando termines ve a Archivo | Guardar como... y ponle el nombre popup.html o con cualquier otro nombre pero al final deberá decir .html
Cuando termines ve a Archivo | Guardar como... y ponle el nombre popup.html o con cualquier otro nombre pero al final deberá decir .html
Luego cambia el Tipo a Todos los archivos, y dale Guardar.
Con esto lo estaremos guardando en formato de página Web, así que probablemente te aparezca un mensaje de advertencia donde te dirá que estás guardando el archivo en otro formato, sólo da click en Sí para guardar el archivo.
Sube ese archivo HTML a un hosting y obtén su URL, esa URL es la que pondrás en donde se indica en color azul.
Y donde dice player: 'html', cámbialo por player: 'iframe',
Puede parecer complicado esto último de armar el contenido "complejo" pero no lo es tanto, obviamente si no estás muy familiarizado (a) con el HTML lo mejor es poner algo muy sencillo como la URL de una imagen y problema resuelto.
Es importante aclarar (porque sé que me lo preguntarán) que no se mostrará una vez y ya, sino que se mostrará sólo en la portada del blog. Si quieras que se muestre en cualquier parte del blog entonces elimina la primera y última línea del código que están en cursiva.
Si quisieras que sólo se muestre en las páginas estáticas, o sólo en las entradas, o en una parte específica del blog entonces elimina de igual modo la primera y última línea y en su lugar pon las líneas del código condicional que sea más apropiado para ti.
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 Plantilla | Edición de HTMLL 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: "0.6",
});
</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:
<a href="URL de la imagen" rel="shadowbox" title="Imagen">Imagen</a>
<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>
<a rel="shadowbox;width=405;height=340;" title="YouTube" href="http://www.youtube.com/v/CCwVb9Faxdc&rel=0&autoplay=1">YouTube</a>
<a rel="shadowbox;width=405;height=340;" title="Vimeo" href="http://vimeo.com/moogaloop.swf?clip_id=8711928&autoplay=1">Vimeo</a>
<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>
<a rel="shadowbox;width=400;height=300" title="SWF" href="URL del archivo.swf">Animación SWF</a>
<a rel="shadowbox;width=700;height=500" title="Página web" href="URL de la página">Página web</a>
<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, yoverlayOpacity es la intensidad de la opacidad del color, un número más bajo hace más transparente el color.
En todos los casos no se mostrará una imagen en miniatura como en mis ejemplos sino que se mostrará un enlace de texto, si quieres que también sean miniaturas en lugar del texto sólo busca la parte del código que es texto subrayado y cámbialo por este código:
<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.
Entradas
0 comentarios :