Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Ventanas modales para mostrar cualquier archivo (Shadowbox)

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://).

Marina dice...

¿Hay algo que no sepas? jaja me vino mmuy bien este truco, ¡queda estupendo!

Gracias Jaime.

Driwrgy dice...

Estoy de un torpe últimamente.... No he entendido muy bien la utilidad de este truco? Es una forma de adjuntar tanto imágenes, como juegos o webs sin que éstas retrasen la carga del blog? No sé muy bien como funciona... Y con lo jodida que tengo hoy la vista, no veo bien los ejemplos, será por eso que me hago un lío... Un saludo.
Cris.

Anónimo dice...

No entiendo algo Jaime, sobre la galeria, tienes repetido 2 veces el codigo, una con Blgal1 y otra mas abajo con Blgal2. En cada uno de estos codigos hay que poner la URL de una imagen verdad?? cosa que si quiero 10 imagenes tendria que repetir el codigo 10 veces y a cada uno ponerle Blgal3 o 4 o 5, etc??? o es de otra forma, porque segun entiendo lo que dices, cada Blgal es un grupo de imagenes. Si es asi, solo veo un lugar donde poner la URL de una imagen.
Gracias.

APU Barcelona dice...

Hola Jaime.
Lo he probado y funciona perfecto en cuanto pueda comenzaré a utilizarlo para mi blog de fotos.
Enhorabuena por tu blog.
Muchas Gracias!
Apu

Jaime Trujillo Escobedo dice...

Básicamente de eso se trata, Driwrgy. También podría decirse que es una manera de mostrar las imágenes sin tener que reducirlas. En la entrada, aparecerá una miniatura de la fotografía real que, al pulsarse, mostrará la imagen en su tamaño real.

Eso acelera la carga del blog ya que la imagen o el archivo queda reducido y tan solo un enlace es mostrado (con el atributo correspondiente para que muestre el artilugio en la ventana modal).

¡Un abrazo!

Jaime Trujillo Escobedo dice...

Gracias por tu comentario, Marina. Aún queda mucho por aprender. ¡Saludos y suerte con el blog!

Jaime Trujillo Escobedo dice...

Anónimo, creo que te enredaste un poco. Verás, el atributo blgal1 define a una única galería en la que aparecerán las dos imágenes que se incluyan en cada uno de los códigos. Al abrir una de esas imágenes, aparecerán las opciones "Siguiente" y "Anterior", de manera que el lector podrá ver las imágenes agrupadas con el atributo blgal1. Si lo que prefieres es agrupar otras imágenes en una galería pero separarlas de las que incluiste con el atributo blgal1, tendrás que utilizar blgal2, blgal3 y así sucesivamente.

Con lo que obtendrías una galería (blgal1), otra con imágenes distintas (blgal1) y otra con imágenes también distintas, que no se repiten en ninguna de las dos anteriores.

La URL de la imagen debe incluirse en donde dice URL DE LA IMAGEN 1. El uno y el dos de dicha frase resaltada en rojo tan solo es para recordar al lector que la dirección a incluir debe ser distinta a la de la primera imagen (la que posee otra foto).

¡Saludos!

Jaime Trujillo Escobedo dice...

¡Bienvenido APU!

Me alegra mucho que lo hayas instalado, a tus blogs les vendrá muy bien ya que las fotografías suelen interferir en la carga del contenido.

¡Saludos!

DJ TUE dice...

Muy buena muchas gracias, siempre me tarda demasiado el blog en cargar y estoy buscando soluciones como estas, ahora mis sets, aparecen en este tipo de ventanas.

Les paso el link a ver que os parece: http://tue86.blogspot.com/

De nuevo gracias. :D

Anónimo dice...

Jaime buenas!

Cómo puedo modificar la apariencia de esa vetana modal, a una que todo el borde sea oscuro y el texto blanco?

Ojalá me puedas ayudar, de antemano gracias.

Alex494 dice...

Hola Jaime, me encanta la idea de esta entrada, pero he puesto lo del video y aunque me aparece el enlace para ver el video pero no aparece como en el ejemplo la imagen. ¿Como lo hago?

Cocina dice...

Hola jaime! espectacular entrada!!
yo subo entre 5y6 videos diarios al blog ,utilizando este sistema crees que hara un poco mas liviana la carga de las paginas?al igual que pasa con las imagenes?
saludos!!
claudia

Cocina dice...

Ya estuve haciendo pruebas con un video que tengo en la sidebar!!y cinseramente me ¡¡encanto!!!ademas de quedar perfecto,ahora espero tu opinion si utilizarlo en las entradas o no..

Jaime Trujillo Escobedo dice...

Alex494, la imagen en miniatura del vídeo no aparece porque aún conservas la frase "Ver el vídeo". Reemplázala con la línea <img src="URL DE TU IMAGEN"/> e inserta la dirección de tu imagen tal y como explico en la parte final de la entrada.

Alex494 dice...

Hola Jaime, lo que yo quiero poner es como en el ejemplo que has puesto tu del video, que me aparezca la imagen del zorro. No se si me he explicado bien :)

Jaime Trujillo Escobedo dice...

Claudia, yo pienso que sería una buena idea. Tu blog tiene muchas imágenes y reducir un poco el tamaño de las que incluyes en los artículos (dando la opción al lector de expandirlas con esta ventana modal) es importante.

Así mismo, como publicas vídeos, quizás sea mejor hacer una captura del reproductor y que actúe como botón para abrir una ventana modal con el vídeo real.

Jaime Trujillo Escobedo dice...

Alex494, eso mismo es lo que te expliqué en el comentario, tan solo se trata de una imagen. La fotografía del zorro y el título del vídeo es una imagen (realizada con una captura de pantalla y recortada con microsoft paint).

Alex494 dice...

A!!!! ok Jaime, muchas gracias.

Cocina dice...

Entendido Jaime!ya lo hice como indicaste, una captura pequeña de imagen del video que actua como boton y queda muy bien!
muchas gracias Jai!esperaba tu opinon para implementarlo en las entradas
saludos!!
clau

Jaime Trujillo Escobedo dice...

Claudia, ya verás como en un tiempo el blog carga a una mayor velocidad y resulta más cómodo navegar por su contenido.

¡Saludos!

Jaime Trujillo Escobedo dice...

Anónimo, para personalizar la apariencia de la ventana modal necesitas descargar el archivo que contiene el CSS. Edita los atributos background:... para cambiar el color de fondo.

Jaime Trujillo Escobedo dice...

¡Quedó perfecto THE UNTHINKABLE ENGINEER! Por cierto, la lista de blogs en movimiento que incluiste en la barra lateral es ideal ;).

DennisJR dice...

hola Tengo una Pregunta:D como podria descargar los scripts de una pagina.
o como puedo subir otros scripts ami servidor.
como estos dos:
http://dl.dropbox.com/u/3301800/LazyLoad.js
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Cocina dice...

Hola Jaime! tengo un incoveniente con el efecto para colocar los videos en ventana modal... cuando lo implemente en las entradas viendolo en IE se me cae la sidebar hasta abajo...y en CHROME se ve perfecto tenes idea porque puede suceder esto??
saluditoss!!!

Jaime Trujillo Escobedo dice...

Claudia, ¿Podrías enviarme la dirección de la entrada en la que publicaste los vídeos? Es aconsejable no incluir demasiados en un mismo artículo.

Unknown dice...

Hola Jaime, a ver si puedes ayudarme. El script no me funciona me carga la imagen en otra ventana.
un saludo y gracias

Jaime Trujillo Escobedo dice...

Master21, es probable que se deba a la incorrecta implementación de la URL de la imagen en el código. Envíame la dirección de tu blog para que pueda ayudarte.

Jaime Trujillo Escobedo dice...

DennisJR, en esos dos ejemplos, el autor utilizó el servicio Dropbox para alojar los scripts.

Puedes acceder a Google sites para subir cualquier archivo (funciona muy bien).

Anónimo dice...

Hola Jaime, que pedazo de truco, es fantastico.
estoy intentando ponerlo en marcha y funciona genial, le da un toque especial.
Solo he encontrado un problemilla, y es que en Internet explorer no hace efecto, mientras que en firefox va de lujo, ¿hay alguna solucion? por que todavia hay lectores que desafortunadamente usan el IE.

Gracias campeon, eres un crack.

Jaime Trujillo Escobedo dice...

¡Hola AdminChess! En primer lugar debo pedirte la dirección de tu blog ya que podría deberse a cualquier cosa.

Por lo que cuentas, parece que la solución será complicada (podría deberse únicamente a un script reciente). Me gustaría ofrecerte una alternativa:
Lytebox en blogger.

fenix75 dice...

Hola Jaime, lo acabo de probar en mi blog y me va todo perfecto...muchas gracias por toda la ayuda que nos ofreces en tu blog....;)

benito dice...

Buenas noches jamie

¿En cuanto a lo de la galería de imágenes es necesario meter tantas líneas de codigo como imágenes hay? quiero decir treínta imagenes, ¿treínta líneas?

Si fuera así me aparecerían treinta imágenes diferentes en la entrada del blog y yo intento que sólo aparezca una que al pinchar me deje ver toda la presentación de la galería.

Muchas gracias y un saludo

Jaime Trujillo Escobedo dice...

Me alegro mucho, Fenix75. Gracias por comentar.

Jaime Trujillo Escobedo dice...

Benito, si deseas mostrar treinta imágenes tendrás que añadir treinta líneas de código; pero no es necesario mostrar todas las miniaturas en una entrada.

Quiero decir que puedes poner la primera imagen en la entrada que mostrará la galería y el resto, en una entrada 'falsa', a la que no incluiremos etiqueta (para que no aparezca en los resultados de búsqueda) y un título especial. En esta falsa entrada pondremos el código del resto de imágenes, siempre manteniendo el mismo nombre de la galería que utilizamos con la primera.

Puedes evitar que la entrada "falsa" aparezca en la portada de tu blog atrasando su fecha de publicación.

América dice...

Gracias Jaime lo tendré en consideración, lastima que terminar tu blog y apenas lo estoy conociendo...

Anónimo dice...

Mi nombre es Javier Velásquez. Muchas gracias Jaime me sivió mucho para mi aplicación quedo chevere... sigue adelante

SergioFM dice...

Me gustó para mostrar sitios web en mi blog, también se me ocurrió una idea. Gracias.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo