Shadowbox: ventanas modales multimedia

26 de abril de 2010 1074 comentarios ,
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:

Imagen

<a href="URL de la imagen" rel="shadowbox" title="Imagen">Imagen</a>

Galería de imágenes

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

YouTube

<a rel="shadowbox;width=405;height=340;" title="YouTube" href="http://www.youtube.com/v/CCwVb9Faxdc&amp;rel=0&amp;autoplay=1">YouTube</a>

Vimeo

<a rel="shadowbox;width=405;height=340;" title="Vimeo" href="http://vimeo.com/moogaloop.swf?clip_id=8711928&amp;autoplay=1">Vimeo</a>

Video Google

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

Archivo SWF

<a rel="shadowbox;width=400;height=300" title="SWF" href="URL del archivo.swf">Animación SWF</a>

Página Web

<a rel="shadowbox;width=700;height=500" title="Página web" href="URL de la página">Página web</a>

Mapa

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


Descargar | archivos Shadowbox
Enlace | Shadowbox


1.074 comentarios en:

" Shadowbox: ventanas modales multimedia "

  1. Potro no entiendo, en el comienzo cuando pide URL del Archivo.css y URL del archivo.js no se que URL debo poner, ya que en el programa me aparecen 6 imagenes: play, next, close, loading, pause y previous.

    ResponderEliminar
  2. Claro, se suben a Dropbox si lo prefieres. En cuanto a las imágenes esas yo ya las alojé, así que no es necesario a menos que tú quieras tenerlas en tu propio servidor.

    Saludos.

    ResponderEliminar
  3. Yo en mis páginas utilizo el Lytebox, VisulaLightbox y el Brightbox que me han servido mucho, especialmente este último porque no tengo que poner ningún atributo, solo subo la imagen y automáticamente el programa las detecta. Pero no me gusta el marco tan grande que aparece en todas las fotos, y la verdad me había dado flojera buscar otros programas. Hasta ahora que me has ahorrado tanto trabajo. La verdad me gusta la simplicidad de la ventana, sin marcos y el texto es transparente. Muchas gracias por compartir, lo voy a usar en una de mis páginas ojala y me funcione de maravilla.

    http://www.dolem.com/lytebox/
    http://visuallightbox.com/
    http://www.ai-projects.info/app/labels/BrightBox.html

    ResponderEliminar
  4. Curiosamente a mí me gustan más con los bordes en las ventanas modales, pero igual me agrada la simplicidad de Shadowbox.

    Seguro te funcionará muy bien :)

    ¡Saludos!

    ResponderEliminar
  5. Hola Potro!, la verdad las imagenes, la pagina web y el video se ven muy elegantes en ventanas modales, me gusto mucho el efecto sobre ellos, lo voy a probar en mi blog a ver que sale,...Muchas gracias!

    ResponderEliminar
  6. Igual a mí me gustan cómo se ven, la idea es que resalten del resto de los elementos.

    ¡Saludos!

    ResponderEliminar
  7. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  8. Hola Potro, he intentado utilizarlo con una página web, pero no me funciona, se ve como un enlace normal. ¿Habré hecho algo mal, o influye que mi plantilla sea descargada de otro sitio? Gracias de antemano. Saludos.

    ResponderEliminar
  9. Hola Julio,

    Prueba poner el primer código después de la etiqueta <head> y no antes de ella.
    Saludos.

    ResponderEliminar
  10. FUNCIONA. Ya entiendo porque antes no me había funcionado:
    No se puede usar el alojamiento de google sites si estás usando un dominio propio. Por alguna razón esta combinación no funciona.

    Con Dropbox va perfectamente. Muchas gracias Potro.

    ResponderEliminar
  11. ¡¡Dios mío, que velocidad!! Has contestado muy rápido y eso se agradece. Pues verás, he hecho lo que me has dicho y sigue igual. Saludos.

    ResponderEliminar
  12. Donde pone en medio Imagen o Animación swf, por que hay que cambiarlo para que no salga esa palabrita?

    ResponderEliminar
  13. Está entretenido y súper útil...
    A mi, igual, me gusta con marcos. ¿Hay alguna forma de incluirlos?.

    Saludos gran Potro.
    Ahhh, gracias por las pestañas. Ya están operativas, dále una mirada!
    ¿Que sería de mi sitio sin tus colaboraciones?... Una simple plantilla básica. Jajaja! (aunque no está muy lejos)

    Jpz.-

    ResponderEliminar
  14. Genial, y yo que estaba por recordartelo, jaja.

    Eso sirve bastante, ya estoy haciendo una lista de cosas donde pueda usarlo.

    Saludos.

    ResponderEliminar
  15. Hola Fende Testas,

    Google Sites últimamente nos está dando muy malas sorpresas como esa que mencionas.
    Ya haré mis pruebas alojándolos en Google Sites para ver qué resultado tiene. Yo por lo pronto estoy tratando de usar Google Sites lo menos posible pues igual tiene conflictos con las URL de las canciones.

    Saludos.

    ResponderEliminar
  16. Julio, no veo que tengas alguna imagen o elemento con el atributo rel="shadowbox"


    Drawer 4 Everyone, está dentro de title, elimínalo si no deseas que aparezca el título de la imagen

    Jpz, puedes cambiarlo editando el archivo shadowbox.css específicamente en donde dice #sb-body img{border:none;}

    El Venado, qué bueno que te ha gustado, ojalá le des buena utilidad :)

    ResponderEliminar
  17. buenisismo yo no mas lo habia probado ya antes pero con puras imagenes y videos, la verdad no sabia de paginas web o no lo habia intentado.

    gracias

    ResponderEliminar
  18. Es bastante completo en ese sentido pues soporta muchos archivos multimedia.

    Saludos.

    ResponderEliminar
  19. Y que pongo ahí... cómo?
    Disculpa tanta consulta, pero me dejo mareado el código.

    Saludos.
    Jpz.-

    ResponderEliminar
  20. Ahhh.
    Una cosa como ésta:

    #sb-body img{border:4px solid #fff;}

    ???

    ResponderEliminar
  21. Perdón, me equivoqué de lugar. Para poner un borde más grueso busca esta parte:

    #sb-wrapper-inner{
    position:relative;
    border:1px solid #303030;

    Lo que está en negrita corresponde al grueso, estilo y color del borde.

    ¡Saludos!

    ResponderEliminar
  22. Lo que más me impresiono es que tambien se puede hacer con webs :D

    ResponderEliminar
  23. Potro sigo sin entender, el codigo que pongo antes de head donde pido URL, pongo URL de que, y luego donde pongo los codigos donde da enlace al video?
    No entiendo :S

    ResponderEliminar
  24. Potro. También a mí me gustan los marcos cuando son elegantes, como el que utiliza www.VisualLightbox.com, pero el que utiliza Brightbox es demasiado simple, lo he cambiado de color y también lo he hecho más angosto, pero el texto no se ve muy bien y en ocasiones desaparece. Este tipo de venta solucionara ese problema. Bueno, más que problema, es gusto personal.

    De nuevo muchas gracias por tus aportaciones.

    ResponderEliminar
  25. PepeX, de verdad es muy completo.

    Coloush +16, la URL de los archivos que debiste subir al hosting, en la entrada se explica cuáles archivos.

    Alfredo, concuerdo contigo, es más cuestión de gusto y por suerte Shadowbox parece satisfacer el tuyo ;)

    ResponderEliminar
  26. La verdad estaba fascinado con Lytebox, me este metodo es mucho mas rapido, estoy dudando seriamente en cambiarlo, a pesar de que absolutamente todas las imagene y videos de mi sitio estan aplicadas en base a Lytebox.

    Que piensas, Potro?

    Saludos, !

    ResponderEliminar
  27. Pues si te ha funcionado bien Lytebox no creo que haya necesidad de cambiar, a menos que requieras de otras características que Shadowbox ofrece.

    ¡Saludos!

    ResponderEliminar
  28. Hola!!! Potro! pues te digo que funciona bien en Firefox pero en explore al momento de ver la imagen abre la web donde se subio la imagen, ya que sabemos que no todos los usuarios que visitan usan siempre firefox! me gustaria saber si ahi solución para eso!. gracias

    ResponderEliminar
  29. Funciona igual de bien tanto en Firefox, como en Explorer o cualquier otro navegador.
    El problema es que IE marca errores en tu plantilla, posiblemente algún otro código impide que carguen los scripts de forma adecuada.
    Entra a esta misma entrada desde Internet Explorer y verás que funciona.

    Saludos.

    ResponderEliminar
  30. Me convenció tanto este tipo de ventana, que acabo de implementar y cambiar todo en la página de mi esposa. Este tipo de ventana, para mi gusto personal, se ve más elegante que el otro que yo tenía.

    Solo si quieren ver cómo funciona. http://www.midulcerincon.com/

    Potro, me ahorraste el dolor de cabeza de calar y buscar ventanas modales que se ajusten a mis necesidades. Gracias de nuevo.

    Nota: Funciona en todos los navegadores, bueno por lo menos en los que más utilizo que son: Firefox, Chrome, Opera e IE8.

    Extremoseventos, solo tienes que dejar que la página termine de cargarse, especialmente si tienes una conexión lenta tienes que esperar un poco más. Pero al final funciona.

    ResponderEliminar
  31. Potro mmmm lo decia por que en tu entrada se ve asi cuando hago clic! :S y al ponerlo en mi blog de igual se ve solo en explore :S

    ResponderEliminar
  32. Bueno espero que haya una solución, por otro lado queria saber com puedo quitar un slide que me vino en la plantilla :

    http://img709.imageshack.us/img709/9313/0101y.png

    http://img219.imageshack.us/img219/4528/0202.png

    ResponderEliminar
  33. Alfredo, tienes toda la razón, hay que esperar a que la página cargue los archivos para que pueda funcionar, yo en mi caso preferí ponerlo después de <head> para que sea lo primero que lea.

    extremoseventos, mi blog igual lo he probado en IE y funciona. Para eliminar lo otro borra desde <div id='jqueryslider'> hasta <!--end jqueryslider-->

    ResponderEliminar
  34. Potro, no recuerdo en que entrada fue donde publique mis ultimos comentarios, solo queria decirte que ya quedo solucionado el problema, muchas gracias por todo. :) Saludos.

    ResponderEliminar
  35. Qué bueno que ya todo está resuelto entonces :)
    ¡Saludos!

    ResponderEliminar
  36. Wow! que interesante. La verdad que se ve muy bien Bro... le da un aspecto mas Profesional al blog. Esta bueno que los bloggers ya no tengamos que limitarnos a hacer un simple post con un texto y una imágen, hoy en dia casi no hay limitaciones en Blogger, se puede hacer lo que se desee, claro, siempre y cuando entres en este blog!!! :)

    No me cansaré de decirlo... eres el Rey de Blogger!!! (viste al final de mi plantilla nueva, jajajajaja... te reirás mucho)

    Un abrazo!!!

    ResponderEliminar
  37. Jajajajajajaja, creí haber leído Burger King, jajajaja, mira que hace un par de meses sí tenía cuerpo de hamburguesa, jajaja.
    Gracias bro, tú siempre tan amable =)

    Un abrazo!

    ResponderEliminar
  38. Una cosilla que he visto:
    Si no acaba de cargar la imagen (se queda "cargando") y la imagen está alojada en blogger, teneis que quitar de la ruta de la imagen el "-h".

    ResponderEliminar
  39. Tengo "casi" todo OK Potro.
    Lo malo que no muestra la imagen, sólamente aparece el Link.
    Si bien al hacer click en el link, ejecuta el proceso, falta que muestre la imagen antes "de"... (esta una muestra en mi blog de pruebas)
    ¿Que hago?
    (Probé pegando el código antes y después de "/head")

    Igualmente continuaré haciendo pruebas, si das con alguna solución me avisas.

    Saludos.
    Jpz.-

    ResponderEliminar
  40. Me encantaría poner esto en mi blog, pero tengo un problema...tarda mucho en cargarse.
    Quizás te puedas dar una vueltita y decirme qué es lo que le pasa.
    Estoy asustada, porque me lleva mucho trabajo (como a todos), pero creo que hice algo mal y por lo tanto tengo este resultado.

    http://clubdeintercambio.blogspot.com/

    Desde ya te lo agradezco mucho

    ResponderEliminar
  41. ¡Hola Potro! Lo siento, borré el elemento con el atributo rel="shadowbox" al ver que no quedaba como debía. Pero tengo el mismo problema que Jpz: se ve el link y al hacer click sobre él se ejecuta el proceso, pero no se muestra la imagen antes de ello, perdona que no me explicara bien desde el principio. He hecho una prueba en mi blog: http://playzone-biggames.blogspot.com/2010/04/imagen.html

    Desde ya, gracias. ¡Saludos!

    ResponderEliminar
  42. Fende Testas, claro, es tal como lo hemos explicado para tener las imágenes en tamaño real.

    Jpz, no he entendido bien ¿te refieres a que en lugar de un texto sea un thumbnail? si es así entonces tienes que cambiar el texto por el código de la imagen.

    Lolilu, si tienes muchos elementos en el blog es normal que tarde al cargarse. Lo que puedes hacer es poner el primer código después de la etiqueta <head> para que sea lo primero en cargarse.

    Julio, lee la respuesta que le di a Jpz, no sé si sea tu mismo caso.

    ResponderEliminar
  43. Potro:
    Creo que no me exprese bién.
    Para que tengas la idea más clara entra aquí, allí verás una entrada de pruebas con dos imagenes (prueba1, prueba2) en donde, sólo falta que muestra la vista de la imagen.

    Saludos Potro.
    Gracias.
    Jpz.-

    ResponderEliminar
  44. Exactamente, el ejemplo que pone Jpz coincide con mi problema, a mí me pasa lo mismo. Gracias por tu atención, Potro.

    Un saludo.

    ResponderEliminar
  45. Vuelvo a preguntar porque no me queda claro cuál es el problema.
    Por ejemplo, en la prueba de Jpz dice el enlace prueba1.
    ¿Ustedes quieren que en lugar de que diga prueba1 aparezca la imagen en miniatura (thumbnail) de la imagen que se agranda?

    ResponderEliminar
  46. Exactamente Potro... soy muy pesado, lo siento T.T
    ¿Eso es normal?

    ResponderEliminar
  47. Entonces sí es como les decía anteriormente, hay que cambiar el texto por el código de la imagen en miniatura, el código quedaría así:

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

    ResponderEliminar
  48. ¡¡SII!! Eso lo explica todo, viéndolo de esta manera es fácil jaja
    Muchas gracias Potro, ¡eres el mejor! ;)

    Saludos

    ResponderEliminar
  49. ¿Y de igual manera es aplicable ese código adicional en el caso de querer poner una página web en la ventana modal?
    Gracias de antemano.
    Un Saludo.

    ResponderEliminar
  50. ¿Porqué cuando lo explica "El Potro", todo se hace fácil?...
    Jajaja!!!

    Porque no te dedicas a la docencia, parece que hay vocación y disposición.

    Saludos maestro.
    Gracias por tu tiempo.
    Jpz.-

    ResponderEliminar
  51. Potro, no sé que estoy haciendo mal, debo de haber cometido algun error, pero me sale esta mensaje una y otra vez:

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The reference to entity "dl" must end with the ';' delimiter.

    Gracias por tu aporte, es justo lo que estaba buscando :)

    ResponderEliminar
  52. Julio, claro, en cualquiera de los casos puedes sustituir el texto por una imagen.

    Jpz, la docencia paga muy poco, jajaja.

    Fran Cruz, posiblemente es la URL de tus archivos, verifica que funcionen bien y que cuando pongas el código no borres ningún otro código de la plantilla.

    ResponderEliminar
  53. hola potro yo intente abrir una de esas ventanitas que tienes en este post pero me tira directo a ala pagina o al video osea me manda a otra pagina y no veo la ventanita negra en tu blog sin salirme de el

    ResponderEliminar
  54. Cierto, Potro, no sabía cómo sacar el enlace de dropbox -.-

    Al fin lo descubrí xD, mil gracias!

    ResponderEliminar
  55. Potro, lo mismo te estoy dando mucho la lata, ¿pero se podría incluir objetos como por ejemplo audio de Goear?

    ResponderEliminar
  56. nEjO, tienes que esperar a que cargue la página para que los scripts sean leídos y pueda funcionar.

    Fran Cruz, tal vez, nunca lo he intentado con ese, podrías probar poniéndole el atributo rel="nofollow" dentro del código, pero no te aseguro nada.

    ResponderEliminar
  57. Esto es lo que necesitaba El Potro. Muchas gracias, por fin me ha funcionado una ventana modal en mi blog (:.

    Aqui dejo la entrada:

    http://evtod.blogspot.com/2007/06/wallpapers-y-avatares.html

    Gracias :D

    ResponderEliminar
  58. Sabía que este sí te funcionaría ;)

    ResponderEliminar
  59. Pues a mi me funciona en firefox ,pero el I Explorer me da error la pagia ,osea la pagina funciona ,pero me dice con error ,a que se debe esto potro ,saludos

    ResponderEliminar
  60. Gracias Potro..sos un genio.
    Besitos

    ResponderEliminar
  61. Hola www.bonaisima.com,

    La URL de los archivos que subiste a Dropbox no es la correcta, recuerda que debes poner los archivos dentro de la carpeta Public y luego copiar la URL.
    Esta semana haré un videotutorial sobre Dropbox para quienes tengan dudas sobre cómo sacar la URL de forma correcta.

    Saludos.

    ResponderEliminar
  62. tienes toda la razon ,potro ,ya el problema quedo resuelto ,muchisimas gracias ,

    ResponderEliminar
  63. Excelente Potroooo!!!!

    Había probado con Google Sites y como uso dominio propio no funciona bien...

    Hice una cuenta en Dropbox y todo bárbaro!

    Pregunta... Para que las imágenes queden tipo "grilla" en el caso de una galería (antes de seleccionarlas y verlas en grande), en qué post puedo leerlo?

    La otra consulta es si es posible que al acceder a mi página haya un bloque de imágenes de bienvenida, y cada imagen se vincule a una URL distinta.

    Aquí hay un ejemplo:

    http://www.clubatleticodemadrid.com/

    La duda no está vinculada a este post, pero quizás ya lo has enseñado.

    Muchas gracias como siempre.

    Saludos!

    ResponderEliminar
  64. Hay una entrada en Oloblogger que creo te servirá para lo que buscas:
    http://oloblogger.blogspot.com/2010/02/otra-pantalla-de-presentacion-facil.html

    ¡Saludos!

    ResponderEliminar
  65. No puedo instalar ninguna ventana modal en mi blog porque todas interfieren con un script que tengo para mostrar un efecto deslizante en el menú. He probado miles y no hay manera. ¿Alguna idea para solucionarlo que no sea eliminar el script incompatible?

    ResponderEliminar
  66. No sé si te refieras a JQuery o Prototype, si es éste último el que usas para el efecto deslizante entonces ese no es el problema, pues yo lo tengo y no me genera conflicto.
    No sé si con JQuery tenga problema, o sea algún otro script de tu blog.

    ResponderEliminar
  67. Al usar shadowbox (me encanta), las imágenes se me quedan con un borde del color del color de enlace, y tambén las demás, ¿cómo puede hacerse para que no tengan ese borde llamativo que indica que es un enlace, por que por lo que veo, tu también has podido queitarlo de tu blog.

    Un ejemplo:
    http://drawer4everyone.blogspot.com/2010/04/federico-garcia-lorca-la-casa-de.html

    ResponderEliminar
  68. No veo que tu imagen tenga esa línea, pero si volviera pon en tu plantilla este código:

    a img {
    text-decoration: none;
    border-width: 0;
    }

    ResponderEliminar
  69. UN MILLON DE GRTASIAS ME SIRVIO MUCHO EL POST

    ResponderEliminar
  70. Potro, cabe la posibilidad de usar este efecto con megavideo?

    ResponderEliminar
  71. Claro, el código es en esencia el mismo:

    <a rel="shadowbox;width=405;height=340;" title="Mega Video" href="http://www.megavideo.com/v/51H2D4UM&amp;autoplay=1">MegaVideo</a>

    Saludos.

    ResponderEliminar
  72. Potro, yo tengo en una pagina estatica unos videos, y no lo encuentro en la Edicion HTML, que deberia hacer?

    ResponderEliminar
  73. Lo hice y ya no se vé.
    Por cierto, este verano me voy de vacaciones a Argentina, ¡a ver si nos vemos!

    je,je. ;)

    ResponderEliminar
  74. Coloush +16, si el código está dentro de una entrada o página nunca lo verás en la plantilla, necesitas ir a Creación de entradas > Editar páginas.

    Drawer 4 Everyone, espero algún día también poder conocer Argentina. ¡Que disfrutes tus vacaciones!

    ResponderEliminar
  75. pero en editar paginas, tengo que poner : YouTube

    Ese codigo, pero modificandolo ? o que?

    ResponderEliminar
  76. Me salio el Link, pero es el codigo que vos pusiste como ejemplo

    ResponderEliminar
  77. yo el codigo este: YouTube lo puse y me sale el link, antes de head puse los links estos:
    A shadowbox.css lo lleve a DropBox/ Publish, y le copie el link, hise asi con los dos, y los ubique donde ivan, ahora ese codigo donde debo ponerlo?

    ResponderEliminar
  78. En tu entrada o página estática debes poner el código de ejemplo de YouTube, ahí le modificas lo que está en color rojo que es la ID del video de YouTube.

    La ID son lo número y letras que aparecen al final de la URL del video de YouTube.

    ResponderEliminar
  79. Potro, probe poniendo antes de head y despues, y en los dos me aparece el link

    http://dl.dropbox.com/u/5804794/shadowbox.css

    http://dl.dropbox.com/u/5804794/shadowbox.js

    Esos dos links, y el codigo lo deje como estaba, el resultado que me da es un link que dice You Tube...
    Que sera...

    ResponderEliminar
  80. No entiendo cuál es el problema que tienes. El primer código se debe pegar donde se indica en la explicación, ahí debes cambiar lo que está en verde por las URL de tus dos archivos que subiste a Dropbox.
    El código que te di para YouTube va en tu entrada, ahí debe aparecer un link el cual al presionarlo debe abrir el video en ventana modal.

    Si te he entendido mal explícame de nuevo el problema para ver cómo solucionarlo.

    Saludos.

    ResponderEliminar
  81. El problema es que en vez de aparecerme la ventana modal me aparece: You Tobe, con vinculo al video. Probe poniendo antes y despues de head, y puse las URL que dije en el comentario 83.
    Tal Vez pueda hacer otra cosa más...
    Saludos.

    ResponderEliminar
  82. Tienes que esperar a que cargue bien la página para que funcione el script.

    ResponderEliminar
  83. Hola Potro...!!! Qué tal??? Tanto tiempo compañero.
    Hacía muchísimo que no entraba y es impresionante como ha crecido Ciudad, muy buenas las cosas que has publicado en este tiempo y ya he implementado algunas a mi blog.
    El Shadowbox esta tremendo a toda la gente le gusto, muy fácil fue implementarlo a mi blog.
    Como siempre GRACIAS DE CORAZÓN...!!!

    Te deseo lo mejor y que sigas creciendo con Ciudad.

    Abrazo compañero...!!!

    ResponderEliminar
  84. Qué gusto leerte de nuevo por acá. Me alegro que hayas encontrado más material que puedes ocupar para tu blog.

    ¡Un abrazo y bienvenido de nuevo!

    ResponderEliminar
  85. Hola Potro: En Internet Explorer 7 (v7.05730.13) NO funciona.

    Estoy en lo cierto??

    Un saludo

    ResponderEliminar
  86. Hola priamo,

    Según la página de Shadowbox funciona desde la versión 6 de Internet Explorer. Yo no tengo ni la 6 ni la 7 así que no sabría asegurarte ese dato, pero muchos de quienes lo han usado tienen la versión 7 y no han tenido quejas al respecto.

    Saludos.

    ResponderEliminar
  87. Hola qué tal??

    No, en Internet Explorer 8 tampoco funciona.


    Saludos!!!

    ResponderEliminar
  88. Lo he probado en Internet Explorer 8 y funciona perfecto, incluso esta misma entrada abre las ventanas modales sin problema.
    Recuerda que debes esperar a que cargue la página para abrir una ventana modal.

    Saludos.

    ResponderEliminar
  89. Hola potro.
    Una consulta como se hace para que la imagen aparezca en modal pero haciendo click sobre un boton y no en la imagen
    ...que la imgn este escondida y que cuando le den click al boton "IMAGEN" aparezca en ventana modal...
    graxias

    ResponderEliminar
  90. Con lo botones no funciona, pues se necesita que el código empiece con a href y en los botones ese atributo no se usa.

    Saludos.

    ResponderEliminar
  91. FELICITACIONES POTRO!!!
    ESTE ES MUY BUEN SITIO.

    OYE TENGO DIFICULTADES, HE SEGUIDO LAS INSTRUCCIONES DE COMO AGREGAR SHADOWBOX, PERO AL QUERER COLOCAR EL CODIGO:

    Imagen

    NO UBICO EN DONDE AGREGARLO.
    YA ABRI LA PLANTILLA HTML NORMAL Y EXPANDIDA.
    PERO NO DOY COMO . . .

    AGRADECERIA TU ORIENTACION.

    ResponderEliminar
  92. Eso va dentro de la entrada donde quieras mostrar tu imagen; en la Edición de HTML sólo se agrega el primer código.

    ResponderEliminar
  93. es valido si uso photobucket o el alojamiento de blogger para este tutorial o tiene k ser obligatoriamente com Dropbox?

    saludos

    ResponderEliminar
  94. Puedes usar cualquier alojamiento de imágenes siempre y cuando la URL de la imagen sea una página con sólo la imagen y no una página que dé las opciones de descargar o guardar la imagen.

    ResponderEliminar
  95. ya veo, muchas gracias potro, te la mandas con este blog!!!!!!!

    saludos

    ResponderEliminar
  96. Hola potro.
    Ante todo gracias por la data; el shadowbox me sirvio pero ahora me surgio un problema. yo tengo imagenes con texto, cuando la ventana modal se presenta ocupa el alto de la pantalla, cosa que hace ilegible los textos que tengo. Quisiera saber si hay alguna forma para que cuando la ventana modal emerja sea mas grande que la pantalla y pueda ver la imagen con texto moviendola con el roller del mouse.
    el link
    http://www.id3arquitectos.blogspot.com/

    ResponderEliminar
  97. Hola ID3Arquitectos,

    No he entendido tu problema, entré a tu blog para ver algún ejemplo y darme una idea pero no vi ninguna imagen en las entradas.

    ResponderEliminar
  98. gracias por el tutorial,

    el problema que tengo en que no me aparecen los dibujos de salir, next anterior, sin en imagenes simples, galerias ni videos, ¿alguna solucion?

    saludos

    ResponderEliminar
  99. hola potro!.
    podes clickear en las fotos de perfil donde dice "quienes somos"....ahi van a salir las imagenes. se ven muy chicas para leer el texto que tienen.
    Ante todo muchas gracias potro

    ResponderEliminar
  100. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  101. Andemarum, las flechas aparecen automáticamente cuando en el atributo indicas que se trata de una galería, por ejemplo: rel="shadowbox[galeria1]"

    ID3Arquitectos, ya veo a qué te refieres, por desgracia Shadowbox no cuenta con una herramienta de zoom que creo sería lo que solucionaría eso :(

    ResponderEliminar
  102. ya lo habia tenido en cuenta, pero no sale (ni en las imagenes simples sale la x de exit). e mirado en la carpeta y los iconos en png estan en blanco, lo unico que e conseguido es hacerlos yo y luego sustituirlos. si puedes te agradeceria que subieses la las img de los iconos. no es normal pero no lo entiendo, gracias.

    ResponderEliminar
  103. Hola Potro...

    Me encanta el shadowbox... pero ahora tengo un problema...estoy modificando una web (que no hice yo) y está armada casi completamente por iframe... entonces tengo problemas para aplicar el shodowbox porque me lo carga sólo en el iframe interno y no en la ventana principal...
    Me puedes ayudar porfavor o alguien que sepa lo que debo hacer....
    Se los agradecería mucho
    Les dejo la url

    http://sego.cl/ala2/multi/in_videos.html

    ResponderEliminar
  104. Andemarum, al final de la entrada está el enlace a Shadowbox, ahí puedes descargar el archivo original con las imágenes.

    Ranota Graphics, si el atributo que indica que se abra en ventana modal está dentro de un iframe obviamente se abrirá en el iframe, no puedes hacer que se muestre en la ventana principal pues nada que esté dentro del iframe puede salirse de ahí.

    ResponderEliminar
  105. Que pena...

    Pero bueno.... gracias de todas maneras por tu ayuda Potro :)

    ResponderEliminar
  106. No me sale la imagen en los videos, QUE PUEDO HACER?

    ResponderEliminar
  107. Te envío esta impresión de una imagen para que veas mejor.

    yo pego el código exactamente como lo tienes y solo me sale el texto, y no la imagen.

    http://img689.imageshack.us/img689/4541/dibujoypo.jpg

    ResponderEliminar
  108. Shadowbox no proporciona una imagen de muestra ni para los videos ni para cualquier otro elemento, lo que yo he hecho es poner una imagen en lugar del enlace de texto.
    En el comentario #49 verás el ejemplo de cómo debe quedar el código.

    ResponderEliminar
  109. Potro el ejemplo del comentario #49 es solo para una imagen, yo quiero el codigo para un video. exactamente como lo tienes de prueba.

    Asi: http://img689.imageshack.us/img689/4541/dibujoypo.jpg

    ResponderEliminar
  110. El ejemplo se puede aplicar para cualquier elemento, en sí a lo que me refiero es que localices en el ejemplo el código de la imagen para que lo sustituyas por el texto.
    Como te dije antes, el script no crea una imagen en miniatura de forma automática, eso tienes que hacerlo tú basándote en el código de ejemplo del comentario #49

    Para no confundirte más, quedaría algo así:
    <a rel="shadowbox;width=405;height=340;" title="YouTube" href="http://www.youtube.com/v/CCwVb9Faxdc&amp;rel=0&amp;autoplay=1"><img style="width:150px; height:100px;" src="URL de la imagen" /></a>

    ResponderEliminar
  111. GRACIAS POTRO ME FUNCIONO A LA PERFECCIÓN. TE DEBO UNA.

    ResponderEliminar
  112. hola me gustaria saber donde pongo este codigo ya puse en css y el js pero este no se donde ponerlo un saludo


    Imagen 1
    Imagen 2

    ResponderEliminar
  113. El resto de los códigos van en una entrada o en un elemento HTML/Javascript, según donde quieras mostrarlo.
    Sólo agrega el código que dice que es para la imagen (por ejemplo en una entrada) y remplaza la URL de la imagen donde se indica.

    ResponderEliminar
  114. hola hago lo que me dices pero como pudes ver no me sale no se por que si quieres te mando el enlace donde lo puse y me lo miras haver en q fallo por muchas buelta q le doy no me sale un saludo y muchas gracias
    http://perytattoo.blogspot.com/search/label/mio

    ResponderEliminar
  115. Shadowbox está funcionando perfecto, en el enlace que me has dado he comprobado que al hacer click se abre la ventana modal, sólo que quizá lo has puesto en otro lugar que no era el que querías.
    El código habitualmente se pone dentro de una entrada normal, como si fueras a escribir un post, ahí pon el código.
    Pero de todas formas, así como lo has puesto funciona muy bien.

    Saludos.

    ResponderEliminar
  116. hola yo quisiera q saliera con la imagen delante no en una nueva bentana el efecto q quiero es como el q tu me muestra pinchas la imagen se pone negra la pantalla y sale en medio la imagen pero asin no me sale solo me sale un enlace q pone imagen yo no veo el efecto como tu lo tienes un saludo y gracias

    ResponderEliminar
  117. te mando el enlace haver si lo hago funcionar http://perytattoo.blogspot.com/search/label/mio
    pero lo que me sale es un enlace que pone imagen pinchas ensima y te lleba aqui donde aloje la imagen de prueva http://dl.dropbox.com/u/4636082/untitled.jpg
    pero no se me habre nueva bentana en negra con la imagen en medio como te sale a ti

    ResponderEliminar
  118. El efecto que tienes es el mismo que yo tengo sólo que quizá como tu plantilla es negra no notes mucho que la pantalla se pone negra. Al final de esta entrada se explica cómo cambiar la intensidad del color de la pantalla.

    Respecto al enlace, así es, si quieres que en lugar de un enlace de texto sea una imagen en miniatura entonces mira el código de ejemplo del comentario #49

    ResponderEliminar
  119. yo cuando pincho en la imagen me lleva a esta direcion y esto es lo q veo no veo el efecto como cuando tu pinchas en tu imagene q tiene pa pasar palante la x de cerrar y esas cosa yo lo veo asin http://dl.dropbox.com/u/4636082/untitled.jpg

    ResponderEliminar
  120. hola e comprobado q donde no me vale es en el explore en mozilla si va q hago para q se vea en explore gracias

    ResponderEliminar
  121. Entonces es tu navegador, posiblemente la versión del mismo. Yo lo he probado en Internet Explorer 8 y funciona muy bien.

    ResponderEliminar
  122. ok voy a bajar el explore 8 muchas gracias y perdona por las molestias eres un fenomeno y me as enseñado mucho con esto graciasss

    ResponderEliminar
  123. nada amigo e intalado el explore 8 y me sige sin valer no se donde estara el fallo e probado en otros ordenadores y no se ve tampoco en mozilla si se ve otra cosa para poner como tienes tu las imagenes en 3 en 3 y cambair el marco de la imagen en blanco un saludo

    ResponderEliminar
  124. Entonces debe ser tu ordenador, yo he entrado a tu blog desde IE8 y como te dije, funciona muy bien.

    Para poner imágenes de tres sólo pon los códigos seguidos uno detrás de otro sin salto de línea.

    ResponderEliminar
  125. hola no creo q sea mi ordenador por q lo probaron hasta en madrid y mas amigos en sus casa y yo soy de cadiz y no le sale le sale la imagen y el fondo blanco como te mande pero solo en explore no se si me faltara argo para q se vea de to manera muchas gracias por tu alluda y espero aprender mucho de ti saludos

    ResponderEliminar
  126. Esta es desde mi ordenador en Internet Explorer 8
    http://i49.tinypic.com/28s9bt3.png

    ResponderEliminar
  127. no sera q la imagen mia es jpg y hay q ponerla en png por que no entiendo por q no sale a mi me sale y a los demas q vi asin como te mando http://dl.dropbox.com/u/4636082/untitled.jpg

    ResponderEliminar
  128. ok ya vi el problema es el windo q tengo puesto q no me deja ver la imagen lo puse en otro xp original y se ve perfeto el problema esta en el windo muchas gracias

    ResponderEliminar
  129. Al menos ya sabes que los demás sí pueden ver las ventanas modales sin problema.
    Respecto al formato de imagen, no importa, puede ser .jpg, .png, .bmp o .gif

    Saludos.

    ResponderEliminar
  130. bueno y te hago una pregunta ¿por q con el explore veo tu efecto en esta pagina y en la mia no y lo hago con el mismo explore? q misterio jejejejej en windo 7 original no me sale tampoco q cosa mas rara jeejejj

    ResponderEliminar
  131. No tengo la más mínima idea, podrías experimentar quitando algunos scripts (como el del intro) y con suerte podrás verlo funcionando desde tu computadora. Pero no puedo asegurarte que ahí esté el problema pues como te dije, yo lo veo perfecto.

    ResponderEliminar
  132. ya me sale lo q falla son tus archivos css y js puse otros archivos css y js y vale del tiron con todo joe la e liado pa hacer esto jejejeje saludos y muchisima gracias

    ResponderEliminar
  133. esto es lo q falla rel="shadowbox" lo cambie por este y vale en todos lados rel="lytebox" saludos por si le pasa a los demas hay esta el fallo gracias amigo

    ResponderEliminar
  134. No, no, lytebox es una librería distinta a shadowbox, así que no es que funcione así porque sí, en tu caso seguro ya tenías los códigos para lytebox y es por eso que esa sí te funciona, pero no es lo mismo que shadowbox.

    ResponderEliminar
  135. Muchas gracias amigo ya lo pude poner mea valido de mucho tu alluda saludosss

    ResponderEliminar
  136. Hola potro, tengo una pregunta. Se puede hacer lo mismo, pero con el formulario de comentarios? De modo que al hacer click en "publicar un comentario" aparezca la ventana y se pueda comentar.
    Un saludo, y gracias de antemano! : )

    ResponderEliminar
  137. Sé que se puede hacer con Lightwindow pero no sé si con Shadowbox también se pueda, al menos nunca lo he intentado.
    Saludos.

    ResponderEliminar
  138. como hago para que esa ventana se abra al iniciar la pagina
    muchas gracias de ante mano.

    ResponderEliminar
  139. Hola potro

    Estoy utilizando este jQuery en mi actual plantilla pero quería saber si tu sabrías como incorpóralo a esta: http://premiumbloggertheme.blogspot.com/

    la verdad es q me gusta mucho el efecto pero no he logrado hacer q funcione

    saludos y gracias por tu atención.

    ResponderEliminar
  140. Este es el jQuery olvide ponerlo:

    http://www.addfullsize.com/

    ResponderEliminar
  141. Nunca he probado ese plugin de JQuery así que no sabría decirte si va bien con Blogger. Apenas tenga un tiempo libre lo reviso, si funciona lo publico.

    Saludos.

    ResponderEliminar
  142. haaa macho, este si me sirvio gracias xD

    ResponderEliminar
  143. hooooo pero adivina, en mi otra makina no funciona :S, pienso ke es el explorador pero es internet 7 las dos :S, y de hecho en la pagina de shadowbox si funciona que rarooo :S

    ResponderEliminar
  144. explorer 8 si,mozzilla si, explorer 7 NO( pero en explorer 7 en la pagina oficial de shadowbox si funciona)

    :S

    ResponderEliminar
  145. Debe ser algún plugin o configuración de tu otro equipo.

    ResponderEliminar
  146. Hola potro

    pues de hecho yo utilizo este tema :
    http://mosaicus-demo-dantearaujo.blogspot.com/

    donde funciona perfecto, por eso mi insistencia :) , pero quiero cambiar de plantilla y no he logrado hacerlo funcionar.

    Saludos y gracias por tu tiempo.

    ResponderEliminar
  147. hola,no se cuales son las url del archivo css ni tampoco la url del archivo js,las imagenes que he subido son 6 y no se a cual corresponde.Por otra parte ,para que esto funcione,donde se instala,el codigo del elemento?gracias

    ResponderEliminar
  148. Hola Charo,

    Debes descargar el archivo que menciono al inicio, descomprimirlo y subirlo a Internet. Las URL de esos archivos van en la parte de color verde del primer código. Eso es lo necesario para que pueda funcionar el efecto.

    El otro código de las imágenes va dentro de la entrada donde quieres mostrar tus imágenes.

    Saludos.

    ResponderEliminar
  149. Como se podria poner un anti copi a todo esto que estais exponiendo.

    Yo lo tenia instalado, pero al poner Shadowbox ya no lo puedo poner con el código que tenia.
    Gracias Potro por tu Blog.
    Saludos (fotografo1953)

    ResponderEliminar
  150. el archivo ya esta descomprimido y subido pero de esas imagenes cuales son las que tengo que copiar la url.

    ResponderEliminar
  151. Potro ya lo tengo, MUCHISIMAS gracia por todo lo demás el tema Shadowbox ya lo tengo instalado "es fenomeno para mi blog"
    Saludos
    Tomás (fotografo1953)

    ResponderEliminar
  152. Charo, si ya tienes todo entonces sólo pon en una entrada el primer código de ejemplo que dice Imagen, ahí debes poner donde se indica la URL de la imagen que quieres mostrar, para tener su URL también debes subirla a Internet.


    fotografo1953, qué bueno que ya has solucionado todo, saludos!

    ResponderEliminar
  153. Mi gozo en un pozo, en el explorer no funciona.
    Haber si tiene una solución tú porque me gustaba bastante como me quedaba.
    Funciona en todos los navegadores menos en el explorer.
    Saludos

    ResponderEliminar
  154. En Internet Explorer 8 funciona a la perfección.

    ResponderEliminar
  155. He repetido todo asta he bajado Shadowbox la última versión.
    Chico no doy con ello no se que puede pasar no me funciona en el explorer.
    Si me das una idea????
    Muchas GRACIAS
    Saludos

    ResponderEliminar
  156. Con Lightbox me funciona en todos, el unico problema es que no me sale la imagen solo el nombre, tengo que pinchar el nombre y ya sale la imagen.
    Es problema es del codigo que no los se.

    ResponderEliminar
  157. Pues según en la página de Shadowbox debe funcionar desde la versión 6 para arriba de Internet Explorer.
    Necesitaría ver la entrada donde lo has aplicado para verificar si es el navegador o quizá un plugin de tu equipo.

    ResponderEliminar
  158. Me gusta más Lightbox, el unico problema que tengo ahora, es que no se como sacar el codigo para ver imagen pequeña pinchar y que salga la grande.
    ¡ no se si me esplico !!
    Saludos

    ResponderEliminar
  159. YA HE CONSEGUIDO QUE FUNCIONE,pero ahora tengo otro problema,al publicar la entrada me sale imagen pincho en la palabra y la veo pero se ve la foto como esa de la jirafa al publicar la entrada.Perdona mi insistencia pero me gusta tanto este efecto

    ResponderEliminar
  160. Ya lo tengo FUNCIA MUY BIEN EN TODOS LOS NAVEGADORES.
    Prefiero para la fotos Lightbox.
    Muchas GRACIA Potro

    ResponderEliminar
  161. Charo, mira el comentario #49 ahí está el código para que aparezca una imagen en miniatura.

    fotografo1953, perfecto :)

    ResponderEliminar
  162. Conseguido, hasta la próxima gracias.
    Un saludo

    ResponderEliminar
  163. Me funciona mu bien Lytebox v3.22 gracias a tí.
    Pero chico estoy intrigado porque no me funciona Shadowbox
    Lo he puesto en un blog nuevo con distinta cuenta y no funciona en el explorer en todos los navegadores conocidos funciona bien.
    He metido el archivo que tienes en enlace y nada el de su pagina Shadowbox y tampoco.
    Es por amor propio y me gustaría resolver
    Gracia por adelantado.
    Saludos

    ResponderEliminar
  164. Si te lo digo no te lo cres he quitado:
    overlayColor: "#000",
    overlayOpacity: "0.6",
    Y funciona en el explorer.
    MARAVILLA.
    Saludos

    ResponderEliminar
  165. Jajajaja, eso sí que es extraño. Lo cierto es que tu persistencia te llevó a la solución, no sé a qué se deba pero te ha funcionado y eso es lo que cuenta :)

    ResponderEliminar
  166. potro ami me se sigue abriendo en el albun picassa, creo ke cometi un error al editar el codigo de la imagen por ke lo del dropbox lo hice bien, no logro dar con la tecla.

    ResponderEliminar
  167. A veces hay que esperar un poco hasta que cargue toda la página y pueda leer el script que hace funcionar el efecto, si se hace click en la foto y no se ha terminado de cargar el blog entonces sucede que abre la foto normal sin el efecto. Quizá ahí pueda estar en problema.

    ResponderEliminar
  168. hola Potro, primero que todo muchas gracias por todos sus aportes... me parece excelente esta pagina, pero tengo un problemita:

    Aplique el Shadowbox a mi blog y segui todos los pasos y me funciona casi perfecto, por favor visite mi blog de prueba http://besamefusa.blogspot.com/ y vera que me sale el enlace para ver la imagen en el texto pero quiero que funcione como en su ejemplo, que al darle clic a la imagen salga y se amplie. que me hace falta?...Gracias

    ResponderEliminar
  169. ¿Qué tal? Yo tengo la misma pregunta.
    ¿Qué debo hacer para incluir una vista en miniatura de la imagen, el video o la animación que sirva de enlace? Con el texto me funciona bien.

    Por cierto hace poco que visito tu blog y me parece estupendo. Un saludo

    ResponderEliminar
  170. Besame, el primer código no debe ir donde lo has puesto, prueba ponerlo después de la etiqueta <head> no antes.

    antoniocauchy, mira el comentario #49, ahí está el código de ejemplo para usar una miniatura de imagen. Saludos.

    ResponderEliminar
  171. Se que te voy a saturar con tanta pregunta y puede llegar a ser molesto, pero me gustaria saber si se puede poner una ventana inicial antes de entrar al blog como por ejmplo la de las paginas webs donde dice entrar para poner una imagen incluso mi nombre y despues entrar. y por ke kuando le meto el codigo rel="lightbox" a una imagen vertical , las demas horizontales se abren en la ventana modal en pekeñito. muchisimas gracias y perdon por dar la tabarra con tantas preguntas. 10 para este blog.

    ResponderEliminar
  172. Sobre los intros no conozco algún método para Blogger.
    Lightbox es distinto a Shadowbox (aunque parezcan iguales) lo mejor es que uses sólo uno, no sólo por los problemas que te cause con las imágenes, sino porque cargar dos scripts alenta mucho la carga de una página.

    ResponderEliminar
  173. Mi buen amigo, así como paso por acá para consultarle, también me obsequio mi tiempo para estudiar tus aportes y aprender de ellos, este ha sido genial, y en verdad lo agradezco, me cae de perlas para nuevos proyectos en mi blog de Publicidad y Diseño Grafico, ese es mi campo de trabajo aca en Venezuela.

    Te comento sin embargo que aunque no tuve problemas para instalarlo, en el siempre problematico Internet Explorer me da el Problema de "Internet explorer no puede abrir el sitio..." y estoy investigando como solucionarlo.

    Un abrazo amigo y de nuevo mi gratitud, respetos y felicitaciones.

    ResponderEliminar
  174. Todos seremos más felices el día que Internet Explorer deje de mostrar tantos errores o.O

    Debe ser algo más que este script pues yo lo he probado en varios blogs desde IE8 y no he tenido problemas.
    Quizá por ahí haya un problema con compatibilidad o algún otro script.

    ¡Un abrazo!

    ResponderEliminar
  175. hola yo tengo una duda que url colocas para que solo te apaeresca la foto y no toda la pagina para las imagenes en este caso usando piccasa

    ResponderEliminar
  176. Entra a Picasa y dale click a la imagen que quieres mostrar, cuando se muestre da click sobre ella con el botón derecho, ahí selecciona 'Copiar URL de la imagen' (o algo parecido)
    Esa la la URL que debes usar para que sólo se vea la foto y no todo el contenido de Picasa.

    ResponderEliminar
  177. oo muchas gracias ya le capte a esto la verdad me facilito mucho tu ayuda que das

    solo quisiera saber como ordenar las imagenes por que me aparecen en lista hacia abajo y me gustaria poner juntas en horizontal como las 3 imagenes que colocaste y luego otras tres abajo y asi

    ResponderEliminar
  178. Para que aparezcan en forma vertical pon el código de una imagen, luego salta un renglón y pon otra imagen y así sucesivamente.
    Para que aparezcan en forma horizontal pon un código seguido del otro, sin saltar renglones ni espacios.

    Saludos.

    ResponderEliminar
  179. mm que mal, no me funciono ya lo intente con el codigo normal y el de galeria quien sabe si sera algun error en el codigo cuando lo agrege en html

    ResponderEliminar
  180. No lo sé, si lo hiciste correctamente se debió ordenar como querías, a menos que la plantilla no te lo permita.

    ResponderEliminar
  181. Hola potro ya logre hacerlo funcionar

    saludos

    ResponderEliminar
  182. POotro este sistema de ventana modal Shadowbox: ventanas modales multimedia ,podria funcionar en un formulario, por ejemplo en el formulario de comentarios, para poder comentar en este ventana una vez abierta.Gracias por su atencion

    ResponderEliminar
  183. Hola Potro. Lo primero, gracias por el artículo. Muy útil, como el blog en su totalidad.

    Tengo un blog muy sencillito (http://denisrod.blogspot.com), que tiene una imagen por entrada. He instalado shadowbox y funciona perfectamente, pero queria preguntarte una serie de cosas:

    - Conoces algun método para que al hacer click en la imagen (ya abierta) te lleve a un link? Mi idea es ir a la entrada en cuestión de cada imagen, para ver los comentarios etc... Otra opción sería meter el link en el propio título, poniendo por ejemplo "haz click para comentar". Pero logicamente en "title" no puedo meter un "".

    - Por otra parte, sabes qué parámetro de css tengo que modificar para cambiar la imagen de fondo de cada entrada por separado? Quiero destacarlas sobre el fondo de la página, para darle un poco más de visibilidad. En el nuevo editor de plantillas no me deja modificar la actual :S

    Perdón por la parrafada. Un saludo y gracias de antemano.

    ResponderEliminar
  184. Lo siento, al final de la primera pregunta había código html y me lo ha quitado. Me refiero a poner un "a href" dentro del título de la imagen.

    ResponderEliminar
  185. guti, en el formulario de comentarios no, eso puede hacerse usando Lightwindow, JMiur tiene una explicación de ello.


    Denis Rodriguez, ummm no, la imagen o cualquier otro elemento sólo puede tener un atributo href y en este caso se está usando para ampliar la imagen por lo que no se puede agregar otro link más.
    Para ponerle un color o imagen de fondo a las entradas agrega debajo de .post { el fondo, por ejemplo background:#CCC;

    ResponderEliminar
  186. Hola quisiera saber por que no me sale la Imagen en miniatura donde pueda dar click, nadamas me sale el texto y yo quiero que me salga la imagen pequeña AYUDA

    ResponderEliminar
  187. Mira el comentario #49 ahí está el código que debes usar para que uses una miniatura.

    ResponderEliminar
  188. compadre, hice todo los pasos, pero la imagen en miniatura no sale, sale es el nombre, cuando le doy clic sobre el nombre si me abre la vetana, pero quiero que me aparezca en miniatura que debo hacer,ya las tengo subidas al blog ahora como hago para meterles el codigo

    ResponderEliminar
  189. Lo mismo del comentario anterior, mira el comentario #49 para saber cómo poner una miniatura.

    ResponderEliminar
  190. gracis ya lo hice y me salio todo bien

    ResponderEliminar
  191. hola.... muy bueno el blog.

    me podrias ayudar por favor, lo que pasa es que he tratado de poner este script de muchas maneras, pero nunca me da el resultado que debería.

    La verdad es que alojé los archivos en google sites, después en dropbox, copié la url decss y js de otras páginas webs para ver si eran los archivos el problema, pero nada... también probé en mi blog de pruebas y en el 1er blog que tuve pero no pasó nada tampoco.... en vez de abrirse el shadowbox se me va ala driección del link

    tambien esperaba a que cargara todo el blog, acá dejo un link a mi primer blog que hice para ver si podrías ver que es lo malo por favor....

    http://melialbo.blogspot.com/2010/07/test.html

    eso sería ....gracias de antemano

    pd: tambien probé a hacerlo como decía en la página oficial, y salía difrenete u poco.... salían las direcciones con comillas dobles y no simples....no sé si será eso o no (aunque también lo intenté de las 2 formas xD)

    ResponderEliminar
  192. Algo sucede con el script que has subido, te cuento que en un blog de pruebas usé tu plantilla y tus códigos que pusiste para Shadowbox y efectivamente no funcionó, pero curiosamente cambié la URL que tienes de tu script Shadowbox por el mío y funcionó de inmediato. Desconozco porqué razón sea ya que la URL de tu archivo funciona muy bien, pero sí noté algo, al inicio tiene una hora distinta al mío, como si se tratara de otra versión, supongo que esa versión la bajaste de otro lado, te sugiero que subas el mismo archivo que he puesto yo a su disposición.

    Saludos.

    ResponderEliminar
  193. Este comentario ha sido eliminado por el autor.

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger