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.
<a title="TITULO" rel="shadowbox" href="URL DE LA IMAGEN"><img src="URL DE LA IMAGEN" style="width: 100px;"></a>
<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>
<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>
<a rel="shadowbox;width=400;height=300" title="SWF" href="URL DEL ARCHIVO SWF">TITULO DEL ENLACE</a>
<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://).
¿Problemas al comentar? Utiliza 
¿Hay algo que no sepas? jaja me vino mmuy bien este truco, ¡queda estupendo!
Gracias Jaime.
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.
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.
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
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!
Gracias por tu comentario, Marina. Aún queda mucho por aprender. ¡Saludos y suerte con el blog!
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!
¡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!
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
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.
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?
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
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..
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.
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 :)
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.
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).
A!!!! ok Jaime, muchas gracias.
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
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!
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.
¡Quedó perfecto THE UNTHINKABLE ENGINEER! Por cierto, la lista de blogs en movimiento que incluiste en la barra lateral es ideal ;).
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
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!!!
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.
Hola Jaime, a ver si puedes ayudarme. El script no me funciona me carga la imagen en otra ventana.
un saludo y gracias
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.
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).
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.
¡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.
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....;)
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
Me alegro mucho, Fenix75. Gracias por comentar.
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.
Gracias Jaime lo tendré en consideración, lastima que terminar tu blog y apenas lo estoy conociendo...
Mi nombre es Javier Velásquez. Muchas gracias Jaime me sivió mucho para mi aplicación quedo chevere... sigue adelante
Me gustó para mostrar sitios web en mi blog, también se me ocurrió una idea. Gracias.