Lightbox: Imágenes en ventanas modales

28 de enero de 2010 278 comentarios ,
lightbox
Las ventanas modales son ese efecto cuando una imagen se abre encima de todo el contenido y oscurece toda la pantalla.
Si bien en la actualidad hay muchos sistemas que permiten hacer todo esto vamos a ver al pionero en su tipo, Lightbox.
Esta técnica creada por Lokesh Dhakar dejó atrás a las ventanas popups ya que el efecto es mucho más llamativo debido a la forma que se presenta la imagen. De él han surgido muchos clones como Lightwindow, Thickbox, etc.

Por lo pronto vamos a empezar a usar Lightbox que se encuentra en su versión 2.04 que aunque no soporta ventanas modales para todo tipo de archivos sí funciona muy bien para las galerías de imágenes.
Puedes ver un ejemplo en esta galería de imágenes de ejemplo.

La instalación es muy sencilla sólo necesitamos Prototype, Scriptaculous, Lightwindows.js y el archivo .ccs de los estilos.

Para poner Lightbox en Blogger entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:
NOTA: Si ya tienes Prototype y Scriptaculous sólo añade lo demás.
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->

<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/lightbox.js' type='text/javascript'/>
<link href='http://sites.google.com/site/ciudadbloggerfiles/Home/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>

Ahora cuando quieras que una imagen aparezca en una ventana modal usa este código:
<a href="URL de la imagen" rel="lightbox"><img width="150" src="URL de la imagen" /></a>

Sólo cambia la URL de la imagen las dos veces donde se indica en color rojo, y en la parte azul puedes cambiar el ancho que tendrá la imagen en miniatura. Si te fijas se ha añadido al código rel="lightbox" esa parte es sumamente importante pues es la que le indicará al script que la imagen debe mostrarse en ventana modal.
Si tuvieras una galería de imágenes sólo se añade entre corchetes el nombre de la galería, por ejemplo:
<a href="URL de la imagen" rel="lightbox[galeria1]"><img width="150" src="URL de la imagen" /></a>

Así de sencillo puedes mostrar tus imágenes con este efecto de ventanas modales que a todos les gusta.

Consideraciones:
  • Lightbox funciona en todos los navegadores aunque las versiones antiguas de Intenet Explorer pueden presentar problemas.
  • Para que la ventana modal funcione correctamente debes esperar a que la página cargue por completo para asegurar que los archivos ya han sido leídos y pueden ejecutarse.
  • Tanto el script como la hoja de estilos los he alojado en mi servidor, pero se recomienda que los descargues y los alojes en tu propio hosting para evitar que se sobre cargue el ancho de banda y se alente tu blog.
  • Una vez que los hayas subido a tu hosting sólo cambia la URL de cada uno de ellos en el primer código que he marcado en color verde.

Descargar script y hoja de estilos.


278 comentarios en:

" Lightbox: Imágenes en ventanas modales "

  1. Perfecta galeria para el Blog.
    Ese tipo de efectos me encantan.Muy bueno post.
    Saludos!

    ResponderEliminar
  2. Igual a mí me gustan mucho aunque a veces suelen ser muy lentas.
    Saludos!

    ResponderEliminar
  3. Yo utilizo un clon llamado Lytebox, que es algo más ligero y permite mostrar además páginas o fragmentos de páginas y objetos flash.

    En las consideraciones, coincido con todas. Es evidente que tiene que cargarse la página completamente para que funcione, porque el script necesita obtener el árbol DOM completo del documento generado en el navegador de la visita para funcionar.

    Saludos.

    ResponderEliminar
  4. Lytebox no lo he probado aunque ya había escuchado de él. Lo que no sé es si todos los navegadores lo soporten aunque generalmente el único que tiene problemas con las ventanas modales es IE (qué raro).

    Saludos.

    ResponderEliminar
  5. Pero que genias esta eso, muy buen trucos,

    Creo que regresaste inspirado de tus vacaciones jaja.

    Por cierto, ¿crees que esto funcione con la galeria que te mencione ayer?

    saludos

    ResponderEliminar
  6. Una pregunta... cuantos años llevas tu en blogger??
    Y otra pregunta... cuanto tiempo estuviste con este blog antes de llegar al éxito...? Al decir éxito me refiero a que te manden mails pidiendo ayuda, que te dejen como veinte comentarios por entrada, que tengas muchos suscriptores y lectores??

    Sabes... te envidio por una cosa... en realidad se la envidio a mucha gente... envidio no haber podido conocer blogger un año antes... de ser así, miss blog ya tendrían muchísimas visitas, jajaja, pero bueno, habrá que esperar un poco, jajaja...

    ResponderEliminar
  7. El Venado, de hecho quedaría mejor que con las ventanas PopUps, haz la prueba, seguro te gustará más.

    Ascesino96, creí que sólo envidiabas el dominio de la Trucoteca, jajajajajaja. Pues justo un año con éste blog, pero no te creas, igual batallé como todos para aumentar las visitas y comentarios; los primeros meses me mantenía con 20 visitas al día :S

    ResponderEliminar
  8. Había visto este efecto en Webs, pero no lo había visto en blogs. Seguro ahora habrá cientos con este efecto, como siempre. Esta ciudad marca un antes y un despues en el mundo de los blogs, no lo apino yo... es lo que veo.

    Un abrazo!!!

    ResponderEliminar
  9. No te creas bro, de hecho muchos blogs lo usan pero nunca había hecho un tuto sobre ello.
    De todas maneras eres muy amable :D

    Un abrazo!

    ResponderEliminar
  10. me encanto la plantilla jajaj, es re tonto lo que digo jaja, pero esta genial como para hacer una presentacion, bueno era para eso, un saludo grandee

    ResponderEliminar
  11. Excelente truco bro ;), hehe me gustó mucho :DDD!
    Gracias por compartir :P!

    Pd: Hay un tuto en Ciudad Blogger para que mi blog tenga emoticones, osea, para reemplazar un texto como esto :D por algo como esto http://i389.photobucket.com/albums/oo336/VAGAJMiur/iSmile03.gif ??

    Saludos y un abrazo!!

    ResponderEliminar
  12. Buah!! esto es lo que llevaba meses buscando, pero sabes si se podír hacer con un texto en ligar de la imagen en miniatura?

    Un abrazo muy fuerte y mil gracias!!

    ResponderEliminar
  13. Ezequiel, de hecho es la Mínima Black sólo le quité los bordes a la cabecera ;)

    CяιsтιαиGσиzαlєz, nunca me he animado a hacer un tuto sobre emoticones ya que suelen ser muy inestables, pero deja pruebo algunos sistemas para ver cuál me parece conveniente y lo publico.

    Fran Cruz, claro, sólo usa un código como este:
    <a href="URL de la imagen" rel="lightbox">TEXTO</a>

    Pozo+10, te dejo un enlace donde Chicablogger explica un código para hacerlo:
    http://chicablogger.com/dos-interesantes-hacks-vietnamitas-para-blogger/

    ResponderEliminar
  14. Este truco lo anduve buscando ya hace meses pero nunca lo haye
    gracias
    pero quienn sabe si lo use pronto pero de todos modos gracias

    ResponderEliminar
  15. Alex, pues si lo ocupas aquí está, por cierto que me encantó la plantilla nueva, mira que de haberla encontrado antes la hubiera usado :P

    Pozo+10, pues algo debes estar poniendo mal de ese código, revisa de nuevo que no te esté faltando nada.

    ResponderEliminar
  16. Mil millones de GRACIAS!!!!! Eres un fiera porto!

    ResponderEliminar
  17. Pozo+10, entonces no debe funcionar ese código, la verdad nunca lo he probado, tal vez Chicablogger pueda asesorarte, ella ya debió probarlo. En el caso de los seguidores ya debe funcionar para todos. Saludos.

    Fran Cruz, por nada ;)

    ResponderEliminar
  18. Funciona perfecto en ambos blogs. Recuerda lo que mencioné al final, para que funcione correctamente hay que esperar que cargue toda la página. Igual te recomiendo que alojes los archivos en un hosting para que cargue más rápido.

    Saludos.

    ResponderEliminar
  19. Jajajaja, lo de la Trucoteca ya está superado, la envidia se fue...
    El dominio estoy mas que seguro que si no lo gano en el próximo sorteo que alguien realize lo gano por mis propios medios que supongo que contará más...
    Mi próxima meta es que acepten mi blog en zync.es y allí poner a cinco dólares la crítica y bueno, supongo que demasiado barato, pero bueno, es para ganar más negocio...

    Y sí, yo desde que cambié la plantilla me olvidé de poner el analycs en mi blog, pero supongo que ahora debo tener 5 visitas al día, jajajja

    ResponderEliminar
  20. Pozo+10, el hosting es el lugar donde alojas tus archivos, en este enlace hay info sobre uno muy bueno.

    Ascesino96, pues invita a tus amigos del colegio a que entren, seguro que puedes aprovechar la escuela para promocionarte ;)

    ResponderEliminar
  21. Hola!!
    Vaya, ví por ahí que hablábais de una tal Trucoteca xD
    Verdaderamente, Potro, tu manera de explicar las cosas es distinta...
    Esta entrada es magnífica, tanto por el contenido, como por la forma de hacerlo (simpre nos han gustado estas ventanitas modales) :)
    Qué bien tener un blog en la red en que ayuden de esta manera a los usuarios, y cómo me gustaría tener un poquito más de tiempo para poder hacer muchas cosas más...
    ¡Un fuerte abrazo desde España!

    ResponderEliminar
  22. Jajajaa, que rápido que viniste Trucoteca, jajajaja, hola!

    ResponderEliminar
  23. No se... ellos no tienen cabeza para estas cosas, en mi calse nadie sabe ni siquiera que es blogger, les mencionas la palabra photoshop y te dicen que es eso... tengo un amigo que le conté, (a el le gusta el photoshop) y entró una vez pero no comentó ni nada porque no sabía como... ¿?
    Jajaja, en fin, supongo que la mejor manera de tener éxito con un blog o web es participar en alguna red social y hablarle a la gente de tu servicio... Lo voy a hacer...

    ResponderEliminar
  24. Hola La Trucoteca,

    Hablábamos de otra Trucoteca a la que Ascesino96 envidiaba el dominio, jajajaja.
    La verdad es que este tipo de ventanas modales son super fáciles de instalar y no requiere de mucho conocimiento por lo que puede ser útil para todos, además creo que somos muchos a los que nos gusta.

    Un abrazo fuerte para ambos!

    ResponderEliminar
  25. Tapachula, seguro te saldrá bien ;)

    Ascesino96, qué curioso, pensé que todas estas nuevas generaciones ya nacían con el gen del Internet (?)

    ResponderEliminar
  26. Potroo, gracias ^^, ojalá si publiques un tuto sobre emoticones :P! Saludos y gracias de nuevo

    ResponderEliminar
  27. Las nuevas, pero no te olvides que yo no so tengo 8 años, tengo 13 años, sí, es verdad, tenemos más facilidad de provar cosas nuevas que antes, pero eso de que ya nacen con el gen son los niños que por ejemplo ahora tienen 9 o 10 a lo sumo...
    Ahora los niños de 6 años tienen celular, yo recién a los 10 tuve mi primer celular y era la tecnología del momento... ahora ese celular es más raro verlo en la mano de alguien que encontrarlo en la calle...

    Jajaja, por fin llegué a los 100 clicks en el ptc que yo uso, ahora puedo tener referidos directos... eso quiere decir que cualquiera que se suscriba a la página desde mi link, me van a otorgar más plata... la url está en el banner que puse en mi blog para los que me quieran ayudar, jeje :)

    Nos vemos Potro, muchas gracias por todo

    ResponderEliminar
  28. Aún así sigues siendo de las generaciones nuevas, mira que mientras tú tuviste tu primer celular a los 10 yo lo tuve a los 20 y estaba emocionado porque era de los primeros que no tenían antena :S

    Saludos!

    ResponderEliminar
  29. Jajaj, en verdad, fue avanzando la generación como así también la tecnología, pero igual se puede decir que cada vez más va aumentando la capacidad de aprender y descubrir... Por ejemplo, yo a blogger lo descubrí así nomás, nadie me dijo lo que era un blog...

    En fin, supongo que en comparación con la generacion anterior, la nuestra aumento mucho tienes razón...

    Por sierto, tu como descubriste blogger?

    ResponderEliminar
  30. Hola Pozo+10,

    He entrado de nuevo a tus dos blogs y en los dos funciona a la perfección. Es posible que sea la versión de tu navegador o mejor dicho que sea Internet Explorer. Prueba verlo desde otro navegador y verás que funciona bien.

    Saludos.

    ResponderEliminar
  31. Que bueno que te guste la puedes usar
    aqui si quieres, pára que cambie un poco te doy el link
    pero si usala
    para que se vea mejor tu blog
    http://bloggerspan.blogspot.com/2009/12/silverline-free-blogger-template.html

    tiene muchas cosas que quite por que aparte que dificultaba el cargar la pagina se veia feo, de verdad si Ciudad Blogger necesita un cambio

    NOS VEMOS

    ResponderEliminar
  32. Naaaa, no te creas, sí me gusta la plantilla pero por ahora no pienso cambiarla ;)

    ResponderEliminar
  33. excelente ,ese ese efecto lo habia estado buscando gracias ;)

    ResponderEliminar
  34. Como Añado la galeria?, osea si tengo 15 imagenes como las coloco :s no entiendo ;)

    ResponderEliminar
  35. Usa el último código por cada imagen que quieras ponerle a la galería.
    Cuando quieras hacer otra galería distinta sólo cambia donde dice rel="lightbox[galeria1]" por rel="lightbox[galeria2]"

    Saludos.

    ResponderEliminar
  36. osea que rel="lightbox[galeria1]" es por cada imagen que vaya poner? si son 15 imagenes son 15 rel="lightbox[galeria1]" ?

    ResponderEliminar
  37. Así es, el último código lo debes poner por cada imagen de la galería.
    O sea que si son 15 imágenes debes poner 15 códigos como el último.

    Saludos.

    ResponderEliminar
  38. Potro, acabo de probar una cosa que me ha funcionado y queda bastante bien, y además se puede utilizar para que no te copien las imágenes facilmente con este mismo efeto.

    Es muy simple, lo que he hecho ha sido subir una foto desde el uploader de blogger, ponerla donde quería (la izquierda en mi caso) y colocar en si sitio rel="lightbox" qudando asi:

    href="IMAGEN ORIGINAL" rel="lightbox" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: justify;"><img border="0" height="240" src="IMAGEN PEQUEÑA" width="

    ResponderEliminar
  39. Claro Fran, es el mismo método, con la ventaja de que Blogger ahí nos da dos URL, una la de la imagen pequeña y otra la de la imagen grande ;)

    Saludos.

    ResponderEliminar
  40. Potro, ¿se podría utilizar este efecto para mostrar videos? He estado buscando por en el web, pero lo máximo que he conseguido es saber que se llama videobox... Un saludo!

    ResponderEliminar
  41. Con este no pero hay algunos que sí lo permiten. Si me es posible lo publico esta semana.

    Saludos.

    ResponderEliminar
  42. Muchísimas gracias potro. Que "dios" te lo pague con muchísimas visitas ;)

    ResponderEliminar
  43. HEY! POTRO UN FAVOR.
    NO ENTIENDO EN DONDE SE PUEDEN VISUALIZAR LOS URL´S DE LAS IMAGENES GRANDE/chica QUE VAYA A PUBLICAR.

    HICE MI CUENTA EN DROPBOX Y AUN ASI NO SE COMO SUBIRLAS
    PARA LA PRESENTACION DE LAS IMAGENES.

    ESPERO Y ME PUEDAS RESPONDER GRACIAS...
    UN ABRAZO!
    OJALA Y PUEDAS REVISAR MI BLOG... http://ldanielcallejas.blogspot.com/

    ResponderEliminar
  44. En este tutorial se explica cómo obtener la URL de los archivos en Dropbox.

    Saludos.

    ResponderEliminar
  45. Gracias a ti por tu visita y tus comentarios :)

    ResponderEliminar
  46. HOLA POTRO, KE PENA, OYE NO PUEDO INSTALAR LAS VENTANAS MODALES DE lightbox- CON DROPBOX.

    SOLO LLEGO HASTA DONDE SE COPIA EL Copy public link.

    PERO EN EL TUTORIAL QUE PUBLICASTE NO APARECE, LA URL DE LO KE ES UNA IMAGEN GRANDE Y OTRA CHICA. YA QUE SOLO ME PARECE 1 EN DROPBOX.

    OJALA Y ME PUEDAS AYUDAR. YA QUE LO EH INTENDADO Y NO MAS NO ME FUNCIONA.

    ME PODRIAS GUIAR???.

    PORFA MANDA EL PROCESO PASO POR PASO YA SEA DE UNAS CUANTRAS IMAGENES HASTA UNA GALERIA COMPLETA, CREO QUE NOSA SALVARAS A MUCHOS.

    UN ABRAZO POTRO, Y MUCHAS GRACIAS POR LO QUE HACES!

    ResponderEliminar
  47. Hola E-mail,

    En ese caso necesitas dos URL, una de una grande y otra pequeña, eso significa que necesitas dos tamaños de imágenes, por lo tanto dos imágenes que tienes que subir a Dropbox.

    Saludos.

    ResponderEliminar
  48. uta me costo mucho pero ya pude mi estima potro mil gracias, pero si estuvo super cañon como ke si le hace falta un poco mas de detalles.
    por otro lado no se cual es la diferencia de la de 1 sola imagen y la de galeria 1?

    gracias!

    ResponderEliminar
  49. una pregunta?
    Potro aparte de este modo de ver la imagenes ke otras opciones hay, y como podria mostrar un catalgo o especie de revista, con y sin descargarse? asi como esta pagina: http://www.macomexico.com/main.php#secc
    en mi blog, ya que si los he visto en otros blogs.
    sabes si issuu o vimeo?
    son gratis?
    por cierto me podrias mandar tu correo?
    un abrazo.
    daniel

    ResponderEliminar
  50. sobre las imagenes grandes y pequeñas que tamaños recomiendas? y de ke medidas son las de tu ejemplo?

    ResponderEliminar
  51. Hola E-mail,

    La diferencia entre una sola foto y una galería es que una galería muestra las flechas para poder ver las fotos siguientes, una sola foto no.
    No he entendido a qué te refieres con la página que has mostrado, no le vi nada en especial.
    Desconozco qué es issuu pero sí se que quienes usan Vimeo no pagan.
    No puedo recomendarte un tamaño de imagen en particular, eso ya depende de cada quien y de la imagen, en el caso de los ejemplo los tamaños grandes son de 800x600 px.

    Saludos.

    ResponderEliminar
  52. HOLA POTRO GRACIAS POR CONTESTARME ME AYUDO MUCHO LA INFO, POR OTRO LADO, RESPECTO A issuu o vimeo CREO QUE SON IGUALES, PERO ME GUSTARIA SABER SI HAY ALGUN TUTORIAL DE VIMEO PARA SUBIR UNA REVISTA O CATALOGO EN PDF Y QUE TENGA LA PRESENTACION COMO ESTA AQUI.
    www.macomexico.com/main.php#secc
    GRACIAS...

    ResponderEliminar
  53. Quizá haya alguno en la red que explique cómo, o incluso en la página de Vimeo puedas encontrar información.

    Saludos.

    ResponderEliminar
  54. Email creo que en http://www.zinio.com/ tabn peudes hacer eso pero noc sie s gratis o no!

    Potro! una pregunta :

    •Tanto el script como la hoja de estilos los he alojado en mi servidor, pero se recomienda que los descargues y los alojes en tu propio hosting para evitar que se sobre cargue el ancho de banda y se alente tu blog.

    Bueno si se a que te refieres pero ya descargo el script y la hoja e cálculos, luego??? como hago o que hago? para subirlo :S

    ResponderEliminar
  55. Pues los puedes subir a Google Sites o cualquier hosting que acepte ese tipo de archivos, luego consigue su URL y sustituyes las mías que están en color verde por las tuyas.

    También puedes alojarlos en tu plantilla para evitar subirlos a un servidor, usa el buscador y busca 'alojar scripts en la plantilla' ahí encontrarás cómo hacerlo.

    Saludos.

    ResponderEliminar
  56. Hola Potro, verdad deje esto por un momento, no habia entendido! ya tengo lo sgte en mi plantilla : Prototype y Scriptaculous con tus respectivos ulr " .js y .css "
    y me funciona bien por ahora que tengo pocas imagenes pero ya ire a agregar más... y noc si se volvera lento por lo que dices de la banda ancha!:S

    Lo que quiero es tener mis propios urls! he intentado entender "como alojar scripts en mi plantilla" pero noc si ahora es necesario que vaya : Prototype y Scriptaculous y tabn esto script type='text/javascript
    ...contenido del script...


    Si bien me podrias explicar como alojar en la plantilla y con cual de esos dos tipos! o como alojar en otro servidor y obtener los links para reemplazar y si son permanentes! espero que me hayas entendido. Gracias! saludos!

    ResponderEliminar
  57. Prototype y Scriptaculous se agregan tan y como están, sólo los que están en color verde son los que recomiendo subir.
    Hay un servicio de alojamiento muy bueno que a mí me ha servido mucho y me parece muy sencillo de usar.
    En el tutorial del siguiente enlace se explica cómo alojarlos en ese servidor y cómo sacar su URL:

    http://ciudadblogger.com/2009/04/alojamiento-de-archivos-gratis.html

    Saludos.

    ResponderEliminar
  58. Hola potro si me funcionó, pude sacar las url! pero sucede esto depues de ponerlo correctamente como indicas, sucede que quiero ver el blog y mira sale esto :

    http://dl.dropbox.com/u/5834355/Dibujo1.PNG

    Tambien me pasa con tus url por eso pense que era eso de la banda ancha :S nos q pasa lo cierra :S, y tenia q sacar los codigos para que funcione el blog, que puedo hcer?

    gracias! sludos

    ResponderEliminar
  59. Es por la versión de tu navegador que no es compatible con ciertos scripts.
    Yo he entrado desde Internet Explorer 8 y abre sin problemas, tengo entendido que las versiones anteriores muestran ese mensaje en muchos blogs, pero es por la versión del navegador.

    En la versión 8, y el resto de los navegadores se ve bien el blog.

    Saludos.

    ResponderEliminar
  60. mmmmmmmmm, pero ese explorer es el 8, probé con otro blog y el otro abría las ventanas normal! pero con en ese blog no!ahora? Saludos

    ResponderEliminar
  61. Intenta con este script, no te prometo nada pero podría servir. Pega antes de </head> lo siguiente:

    <script>
    function detenerError(){
    return true
    }
    window.onerror=detenerError
    </script>

    Guarda los cambio y entra al blog para ver si funciona.

    Saludos.

    ResponderEliminar
  62. Bueno Potro, no me funcionó que pena! Tanto que me gustaba ese estilo que se va hacer!
    Gracias de todas maneras! Saludos!

    ResponderEliminar
  63. Ojalá y los programadores de Internet Explorer puedan solucionar de una vez esos problemas que siempre aparecen :S

    ResponderEliminar
  64. si bueno! Potro podras hacer un tutorial mejor explicado sobre este informe parecido : http://www.cabel.name/2008/02/fancyzoom-10.html

    Saludos

    ResponderEliminar
  65. Gema tiene una entrada reciente sobre ello:
    http://gemablog-.blogspot.com/2010/03/galeria-con-jquery-fancy-thumbnail.html

    Saludos.

    ResponderEliminar
  66. Hola amigo Potro, no sabes como se puede hacer para que cuando el cursor pase sobre la imagen aparesca una lupa,

    gracias

    ResponderEliminar
  67. Hola Julian,

    En Lightbox nunca he visto que tenga ese efecto de la lupa, hay otros clones de Lightbox que sí lo tienen como Lightwindow.
    Si el archivos .css tuviera el estilo .lightbox se podría agregar pero al parecer este truquillo no lo trae.

    Saludos.

    ResponderEliminar
  68. Muchas Gracias amigo Potro, voy aprobarlo, despues le cuento

    ResponderEliminar
  69. Hola no se como instalar el script...me ayudas

    ResponderEliminar
  70. Hola smachado,

    Puedes usar un alojamiento gratuito como Dropbox, ahí se explica cómo subir el archivo.
    Ya que lo subas pega su URL en lugar de la línea verde de este código.

    Saludos.

    ResponderEliminar
  71. He estado intentado conseguir este efecto y ha sido en esta web donde me he conseguido enterar. Felicidades por la explicación.

    Saludos.

    ResponderEliminar
  72. Entonces qué bueno que has llegado hasta acá, eres bienvenido las veces que lo desees.

    ¡Saludos!

    ResponderEliminar
  73. Hola q tal el potro aqui yo molestando d nuevo XD jajaja

    bueni esta vez es para saber si hay alguna forma d bloquear el "Clic Derecho" en las imagenes ya q estan ampliadas

    cheque el metodo q dice Fran pero se me hace muy tedioso ya q en su momento cuando ponga las imagenes a cada entrada seran cerca d 300 imagenes en total distribuidas en todas las entradas y pues me seria mas facil tener un codigo el cual solo tenga q modificar con la URL

    y Gracias adelantadas! XD

    ResponderEliminar
  74. Nop, recuerda que las imágenes tienen su propia URL y no tenemos acceso a su código para agregar scripts o algún otro código de seguridad.

    Saludos.

    ResponderEliminar
  75. El Potro, este efecto es excelente, pero no he logrado hacerlo.

    Antes de /head pegué lo que tu indicas.

    Luego, en una entrada pegué esto (Uso - en lugar de > o <):

    -a href="http://picasaweb.google.com/unpaseoporlafranja/PruebaDeLightbox#5461167011085384866" rel="lightbox"--img src="http://picasaweb.google.com/unpaseoporlafranja/PruebaDeLightbox#5461167014862587154" /--/a-

    Resulta que la imagen pequeña no se ve, y la grande no aparece al apretar la pequeña.

    Probé de alojar los archivos .js y css. en Google Sites y tampoco me funciona...

    Puede ver aquí como se ve esto:

    http://prueba3upf.blogspot.com/2010/04/prueba-de-fotos.html

    Espero puedas ayudarme, gracias!

    ResponderEliminar
  76. La URL que está usando es de la página de Picasa donde se muestra la foto, pero no es la URL de la foto.

    Para sacar la URL entra ahí mismo en Picasa, haz click para ver la imagen.Con el botón derecho sobre la imagen selecciona copiar dirección de enlace de la imagen.
    Esa será la URL de la imagen que debes poner.

    ¡Saludos!

    ResponderEliminar
  77. Excelente Potro! Funciona!

    Puede ser que el efecto le cambie el tamaño a la imagen grande? Porque si bien funciona el efecto de galería, me agranda una imagen y queda mal.

    Si puedes darte una vuelta de nuevo por el blog de pruebas

    http://testdeunpaseo.blogspot.com/2010/04/blog-post.html

    puedes ver que al pasar a la segunda foto de la galería de prueba queda mas grande que la foto de origen y queda descentrada....

    La URL de la imagen es
    http://lh4.ggpht.com/_Ue-ZgJNwuEg/S8n2dNua3BI/AAAAAAAAAtE/AMIXLKDVgdo/s512/grande2.JPG

    Muchas gracias nuevamente.

    ResponderEliminar
  78. Quizá es porque la imagen está demasiado grande, incluso es más grande que el ancho de tu blog.
    Prueba con un tamaño más pequeño y que sea menor al ancho de tu blog.

    Saludos.

    ResponderEliminar
  79. Ok, muchas gracias, intento eso.

    Aunque la imagen "original" que está alojada en picasa no es mas ancha que el blog, al parecer se "agranda", no se porque...

    Al menos me parece que no es tan ancha, por lo que veo aquí...

    http://lh4.ggpht.com/_Ue-ZgJNwuEg/S8n2dNua3BI/AAAAAAAAAtE/AMIXLKDVgdo/s512/grande2.JPG

    Saludos, y excelente todo el material que tienes disponible, y al cual he recurrido muchas veces.

    ResponderEliminar
  80. Cuando subes una imagen desde Blogger toma varias medidas, cada una con distinta URL.
    Cuando se aplian algunos de estos hacks toma la URL de la imagen más grande, que es la de tamaño original; esa es la que es mucho más grande que el ancho de tu blog, o sea, esta:

    http://lh4.ggpht.com/_Ue-ZgJNwuEg/S8n2dNua3BI/AAAAAAAAAtE/AMIXLKDVgdo/s1600/grande2.JPG

    Saludos.

    ResponderEliminar
  81. ¿A qué te refieres con lo de: "Si tuvieras una galería de imágenes sólo se añade entre corchetes el nombre de la galería"?

    ResponderEliminar
  82. Me lleve una sorpresa cuando revise que no me esta funcionando u.u..., será que tengo que agregar algún otro script?... tal vez no se estan cargando estos scripts:

    google.load("prototype","1.6.0.3");
    google.load("scriptaculous", "1.8.2");

    Me puedes ayudar porfa?.

    ResponderEliminar
  83. El Potro: Lo prové aca: http://pruebaevtod.blogspot.com/2010/04/prueba-galeria-lightbox.html y funciona perfecto, pero aca: http://evtod.blogspot.com/2007/06/wallpapers-y-avatares.html no pasa nada D:..., será algún script que tengo en la plantilla?.

    ResponderEliminar
  84. Hola Whisper,

    La galería se refiere a que si quieres poner una galería entonces a todas las imágenes que quieres incluir en la galería les pondrías rel="lightbox[galeria1]" dentro del código de cada imagen, esto para que aparezca la flecha de siguiente y anterior.

    No veo que tengas el otro código en tu plantilla, el que va abajo de:
    google.load("prototype","1.6.0.3");
    google.load("scriptaculous", "1.8.2");

    Agrégalo y verifica si ya funciona.
    Saludos.

    ResponderEliminar
  85. Tu cual crees que sera la mejor ventan modal para utilizar eficasmente?? porque quiero instalar una y no me decido por cual sera la mejor en todos los sentidos

    Saludos!!

    ResponderEliminar
  86. Lightwindow es una de las más completas pero suele no funcionar muy bien en Internet Explorer, tendrías que probar en tu plantilla algunas tres opciones de ventanas modales y ver cuáles te dan problemas y cuáles no.
    Una que igual es completa es Shadowbox, incluso en estos días voy a publicar una entrada sobre ello, pero de igual forma tienes que hacer tus pruebas antes y asegurarte que en todos los navegadores se ve bien tu plantilla.

    Saludos.

    ResponderEliminar
  87. @El Potro:

    Podrías chequear esta entrada:
    http://evtod.blogspot.com/2007/06/wallpapers-y-avatares.html

    He puesto el codigo en la plantilla, el que me indicaste, pero sigue sin funcionar..., los pusé sobre los dos wallpapers que ahi en la entrada u.u.

    Y aca:
    http://pruebaevtod.blogspot.com/2010/04/prueba-galeria-lightbox.html

    funciona bien u.u, no se que pueda ser :(.

    ResponderEliminar
  88. gracias por el consejo me decidido por el que publicaste.. pero tengo otra duda me explicarias o tienes algun post que explique como alojar archivos en site.google o algun lugar de google porque no consigo donde alojar los archivos para utilizarlos en mi plantilla?

    Saludos

    ResponderEliminar
  89. Whisper, podría ser por algún otro script que tienes en tu plantilla, por ejemplo el Lytebox, quizá ese o algún otro no están dejando trabajar a Lightbox.

    Bilosony2™, crea un sitio, luego haz click arriba en el botón Más acciones, selecciona configuración de la página, marca la casilla Permitir archivos adjuntos, guarda los cambios y listo, ya podrás subir tus archivos a Google Sites.

    ResponderEliminar
  90. @El Potro:

    La cosa es que con lytebox tampoco funciona :(. Solo tengo un script para las opacidades de las imagenes. No se que pueda pasar u.u.

    Gracias por el esfuerzo de todas maneras.

    ResponderEliminar
  91. A lo que me refiero es que quites momentáneamente Lytebox y pruebes si funciona, si no funciona entonces quita el de las opacidades, y así hasta detectar cuál de ellos es el causante.
    De todas formas en estos días publico otro tipo de ventanas modales por si este no logras echarlo a andar.

    Saludos.

    ResponderEliminar
  92. Gracias...

    Tengo un problema e podido subir todos los archivos sin drama pero al momento de necesitar el url del archivo para subirlo a mi plantilla no lo consigo. que procedimiento deveria realizar para eso??

    ResponderEliminar
  93. Disculpa que sea tan molesto ya jaja Pude encontrar la manera poder utilizar los archivos era bastante boba la solucion no me avia dado cuenta jeje

    Saludos y gracias!!

    ResponderEliminar
  94. Perfecto, qué bueno que ya pudiste arreglarlo ;)
    ¡Saludos!

    ResponderEliminar
  95. Hola, tras infinidad de pruebas estoy más perdido que un cangrejo en un ascensor.

    Funciona en mi blog de pruebas, pero no en el bueno. Tengo exactamente lo mismo, pero nó, no quiere funcionar.

    Lo curioso es que funcionó unos días y luego dejó de hacerlo. Cambié a shadowbox y funcionó... 1 día, y dejó de hacerlo.

    La verdad, ni idea ya de por donde mirar.

    ResponderEliminar
  96. Por si alguien quiere mirar y ve algo y me da una pista:

    http://www.fendetestas.es (el bueno)
    http://fendetmp.blogspot.com (el de pruebas)

    Gracias

    ResponderEliminar
  97. Podría ser porque arriba del código de Scriptaculous tienes unos códigos de comentarios que al parecer no están bien formados, y que además creo que no son necesarios.
    Quítalos y verifica si ya funciona.

    Saludos.

    ResponderEliminar
  98. Eran los códigos de shadowbox que tenía comentados. Los he quitado, pero nada.

    ResponderEliminar
  99. Pues no se me ocurre qué más pueda ser :s

    ResponderEliminar
  100. Tras comprobar que el código de las dos páginas es idéntico, la única diferencia es el uso de dominio.

    Y resulta que si uso un dominio no funciona. Con el dominio blogspot si funciona. Lo que no entiendo es la razón de esto ni como arreglarlo. Ni porqué a otros les funciona y a mi no... :-(

    ResponderEliminar
  101. Por un momento pensé que el problema podría ser el dominio, pues ya se han dado casos de scripts que no funcionan cuando se usa un dominio propio aunque desconozco por qué.

    Puedes probar con Shadowbox, ese funciona bien aun en los dominios propios.

    Saludos.

    ResponderEliminar
  102. Ya casi funciona. Te comento en el artículo de Shadowbox.

    ResponderEliminar
  103. Hola Potro...

    Decidí este estilo pra mi galería, en lugar del que da efecto de agrandarse con un click y achicarse con dos...

    Lo que no logro conseguir es añadir un título y breve descripción de la imagen, ni tampoco logro que salgan las flechas de seguiente y anterior al encerrar en corchetes el nombre de la galería... Cómo podrías ayudarme?

    ResponderEliminar
  104. Hola Jonnathan,

    En este tipo de galerías no aparece el título de la foto en la parte superior, sólo puedes ponerlo abajo, el cual generalmente se usa como descripción de la foto.
    Para ponerlo agrega después de la primera URL de la imagen lo siguiente:

    title="Aquí va el título o la descripción"

    Respecto a las flechas, esas aparecen de forma automática cuando hay un nombre dentro de los corchetes. Recuerda que el nombre de la galería debe ser único, sin tener dos galerías con el mismo nombre.

    Si no aparecen podría ser porque el servidor no está cargando todos los archivos, específicamente las imágenes, a veces cuando se satura el servidor sucede.

    ResponderEliminar
  105. Gracias Potro!, te cuento que por error no sabía que las flechas aparecían arriba, yo pensaba que aparecían debajo, en la franja blanca donde sale "CLOSE X"...

    En cuanto a lo del título.. bueno, yo traté de insertar una frase similar en otros lados, según lo que ví en la página de lightbox, y nunca me funcionó... pero esto que me pones aquí funciona de maravillas!, ya te enviaré un link a mi blog para que veas lo que he hecho... mientras tanto, todavía está en construcción y no quiero que se vea antes de finalizarlo :)

    Gracias mil, eres excelente tutor y anfitrión en tu website... no descuidas nada ni a nadie, eso te da un 100% en calidad.

    ResponderEliminar
  106. Te agradezco tus comentarios, seguro te quedará muy bien tu galería :)

    ResponderEliminar
  107. hola!!!
    oye... para no saturar tu ancho de banda, descargue los archivos y los puse en otro site, peeeeeero las imagenes de loading, close y el tache no salen y no se donde ponerlos o donde poner el codigo correspondiente :S....
    crees que me puedas ayudar por favor? =)

    ResponderEliminar
  108. Las imágenes están alojadas en el archivo .css pero yo las veo funcionando en tu blog sin problemas.

    ResponderEliminar
  109. jajaja si las ves funcionando por que ahorita esta trabajando con tus links! ouch! :S

    ResponderEliminar
  110. De todas formas, como te dije en el archivo lightbox.css están las URL de las imágenes, pero esas están subidas a Blogger, así que no interfiere si el archivo lightbox.css lo cambias a otro alojamiento, las imágenes siguen estando alojadas en el mismo lugar, a menos que, también hayas cambiado las imágenes de ubicación, y estas URL que pudiste haber modificado no estén correctas.

    ResponderEliminar
  111. Muchas gracias me ha servido
    es justo lo que buscaba para mi blog de diseño

    saludos

    ResponderEliminar
  112. Qué bueno que encontraste lo que estabas buscando.
    Saludos.

    ResponderEliminar
  113. Potro!... Ya he completado la plataforma de mi blog con tu invaluable ayuda y recursos... En esta ocasión deseo copartir contigo, y con todos los demás el resultado de mi blog, espero que disfruten el contenido!

    http://jonnathansanchez.blogspot.com/

    ResponderEliminar
  114. Felicidades por tu blog y mucho éxito.

    ResponderEliminar
  115. hola, si me funciono. solo que al momento de abrir el blog en la barra de abajo me dice "LISTO PERO CON ERRORES" y el menu de imagenes destacadas me deja de funcionar, por que sucedera esto?

    ResponderEliminar
  116. Internet Explorer suele poner esos mensajes cuando considera que algún script no está del todo bien aunque sí lo este.
    Del menú que dices no sé a cuál te refieres, podría ser por incompatibilidad entre los distintos scripts que tengas.

    ResponderEliminar
  117. http://jardinrehilete.blogspot.com/ es en este el scrol no me funciona cuando pongo lightbox :s

    ResponderEliminar
  118. Es porque Lightbox usa Scriptaculous, y el slider que tienes usa JQuery, esas librerías no son compatibles.
    Podrías probar con Shadowbox en lugar de Lightbox.

    ResponderEliminar
  119. SI PUDIERA DECIRME COMO EDITAR PARA QUE SALGAN LAS IMAGES, CLOSE, X..... ETC LO ICE EN MI PROPIO HOSTING PERO NO SE VEN ESTOS ALGO DEBERE DE MODIFICAR SEGURO EN -- Prototype y Scriptaculous-->. creo muchas gracias.

    ResponderEliminar
  120. Hay que editar tanto el archivo CSS como el archivo JS, en ellos busca las URL de las imágenes que quieres cambiar.

    Saludos.

    ResponderEliminar
  121. lo ke kiero eske aparezca la palabra close y la cruz de cerrar ke solo aparece un interrogante azul ? es por eso??. gracias

    ResponderEliminar
  122. La palabra close es una imagen, si esa o cualquier otra imagen la quieres cambiar puedes hacerlo no pasa nada pero como te mencioné, debes cambiarlo tanto en el archivo CSS como en el archivo JS, sólo localiza la URL que le corresponde y cámbiala por la tuya.

    ResponderEliminar
  123. DONDE PUEDO LEER UN TUTO O ALGO REFERENTE, SIENTO PREGUNTAR SIN TENR MUXA IDEA PERO ME CUESTA ENCONTRARLO EXACTAMENTE, Y TENDRIA KE PONER LA URL DE LA IMAGEN QUE ESTA EN EL HOSTING NO?? GRACIAS DE NUEVO.

    ResponderEliminar
  124. Con Wordpad abre el archivo .JS ahí busca esta URL:
    http://4.bp.blogspot.com/_dsEG33PDaHw/S2HChaAXXVI/AAAAAAAAAFQ/tDlU7rbHUbc/s320/closelabel.gif

    Cámbiala por la URL de la imagen que quieres y guarda los cambios.

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

    ResponderEliminar
  126. No se exactamente como esplicarlo soy nueva en esto, me gustaria que se vieran las ventanas modales pero que no pudieras dar click boton derexo para copiar la imagen, donde si le das sale el menu copiar imagen, guardar en donwloads.... etc. solo ke se abra la ventana modal. muxas gracias lo siento si no me esplike bien.

    ResponderEliminar
  127. En Blogger no se puede pues no tienes acceso al código de la página donde se encuentra la imagen para poder protegerla con algún script.

    ResponderEliminar
  128. holaaa tengo un problema hice todo lo que dijiste pero cuando abro la imagen el lightbox me sale mas chica dejando espacio en blanco u.u, que hago?? ayuda plisss mi blog: http://lucker1.blogspot.com/

    ResponderEliminar
  129. osea no me anda la imagen grande, solo la imagen pequeña, me abre y me deja espacio en blanco u.u

    ResponderEliminar
  130. ya me se que es, es por mi plantilla u.u, pero no tengo ni idea cual puede ser el problema xd

    ResponderEliminar
  131. Hola sky lucker,

    He entrado a tu blog y veo las imágenes en tamaño mediano en el post y grandes al hacer click sobre ellas, es decir, lo veo todo bien. Entré desde Google Chrome e Internet Explorer 8

    Saludos.

    ResponderEliminar
  132. El Potro, hay alguna manera de que al subir una imagen directamente a blogger ya se aplique el lightbox?? es decir, sin tener que ir a "Edición HTML" y pegar rel="lightbox" en todas las imágenes??? Saludos

    ResponderEliminar
  133. Ohhh Maestro que seria de mi sin ti... lol.. Desde Tiempo Antaños venia soñando con esto para mi blog...

    Ojo** A los que no le funcione a la primera como a mi.. Revisen otros( Script) que tengan en la Plantilla, este lightbox no le gustan lo de su raza.. jajaja..

    ResponderEliminar
  134. @Slarle, en lo que alguien se anima a resolver tu pedido(k lo dudo, jejeje broma) prova esto:
    1.- Ve a tu plantilla.
    2.- Configuración
    3.- Formato
    4.- **Pega el Código** en la parte de abajo en ( Plantilla de entrada)y te saldra de forma automática cuando va a crear una entrada...
    Bueno es lo que se me ocurre... Saludos

    ResponderEliminar
  135. Ummm no, lo que él quiere es que al subir la imagen desde Blogger ya cargue con el código y no se puede.

    ResponderEliminar
  136. hola potro disculpa pero necesito tu ayuda en mi blog quiero poner un slider k se mueva y no c como, mi plantilla tiene uno pero no c como ponerlo a funcionar mi blog es el siguiente http://kmurbanov2.blogspot.com/ a lo k me refiero es donde dice clic para la mami del dia quiero k esa imagen se mueva para poner algo destacado de mi blog espero tu repuesta lo antes posibe ayudame por favor

    ResponderEliminar
  137. Mira esta entrada, ahí hay un slider que te puede servir.

    ResponderEliminar
  138. oie mi potro otra vez yo
    este si puedo implementarlo en mi blog
    pero ahora te quiero hacer una pregunta
    e visto varias galerias
    mira exactamente esta( o parecida)
    http://www.cosassencillas.com/wp-content/uploads/2007/10/galeria-js1.png

    te sabes algun codigo mi potro?

    ResponderEliminar
  139. aa y otra cosa mi potro ( a como molesto)
    como lo pongo en las entradas?

    ResponderEliminar
  140. y tambien como pongo varias fotos
    te agradeceria y me ayudaras potro
    gracias

    ResponderEliminar
  141. No tengo idea, nunca lo he usado y desconozco el procedimiento para instalarlo :(

    ResponderEliminar
  142. Si te refieres a varias fotos usando Lightbox sólo se hace usando el segundo código, de esa forma aparecerán las flechas en las imágenes ampliadas pero en las miniaturas o los enlaces aparecerán normal, no las agrupa.

    ResponderEliminar
  143. exelente muchas gracias no es mi rama la informatica pero me agrada aprender y asi se hace mas facil thanks

    ResponderEliminar
  144. Qué bueno que te ha resultado útil esta información!

    ResponderEliminar
  145. Hola nuevamente Potro! Cómo anda todo?

    En esta ocasión te escribo pues, ya he hecho de mi blog una verdadera página web, con dominio propio y todo! Estoy muy satisfecho con el resultado. Sin embargo, hay algo que no logro decifrar, y es el hecho de que en las computadoras Mac, el efecto lightbox no se despliega, solo se quedan como Thumbnails y nunca abren.... Sabes a qué se deba esto? Me gustaría saber por favor, si hay algo que se pueda hacer para solucionar este pequeño inconveniente...

    Te agradezco anticipadamente cualquier ayuda que puedas brindarme!

    ResponderEliminar
  146. No sabría decirte, en el sitio de Lightbox no mencionan nada acerca de los navegadores que lo soportan así como de los sistemas operativos. Es posible que no esté disponible para Mac :\

    Saludos.

    ResponderEliminar
  147. Hola El Potro!
    Buscaba la forma de instalar esta herramienta y encontré tu blog por casualidad (por Google). Felicidades porque veo que está muy bien estructurado y con muchas visitas... quién las tuviera!

    Te escribo porque tengo un problema y no sé si tendrá fácil solución. En un post, tengo publicadas 4 fotos: 2 horizontales, 2 verticales. Inicialmente, tenía puesta la etiqueta de [ rel="lightbox" ] en cada una de ellas. Tras varios intentos, me di cuenta que o bien se me veían bien las fotos verticales con Lightbox (y las horizontales se veían muy pequeñas, con un fondo blanco grandísimo alrededor), o bien se me veían bien las horizontales (y las verticales se "salían" literalmente del borde blanco de Lightbox).

    Luego recordé lo de la etiqueta de galería [ rel="lightbox[galeria1]" ], pero me sigue pasando lo mismo.

    Me pregunto si el problema es que sólo pueden verse todas las imágenes verticales, o bien todas horizontales (aunque esto tampoco tiene mucho sentido).

    Por favor, ¿puedes echarme una mano? 1.000 gracias.

    Por cierto, tengo Mac y sí que se me abre (lo digo en relación al comentario #159...)

    ResponderEliminar
  148. Hola Chamaida,

    El fondo blanco debe ser el marco que se forma alrededor de la foto. Se supone que las fotos así como el marco se debe reajustar automáticamente.
    Lamentablemente en el sitio de Lightbox no mencionan nada acerca de la compatibilidad con Mac y como yo aún no tengo una tampoco podría asegurarte si es la incompatibilidad con el navegador o alguna otra cosa (con la compatibilidad no me refiero a que no funcione, sino que no se muestre como debería mostrarse.)

    Sólo se me ocurre que pruebes hacerlo en otra plantilla con las mismas imágenes para ver si se ven igual, sino entonces sabremos que es la plantilla que usas.
    También podrías probar con Shadowbox, es igual de bueno y quizá con él no tengas problemas.

    Saludos.

    ResponderEliminar
  149. Hola Potro:

    Muchas gracias por tu rápida ayuda. Casualidades de la vida, anoche, después poner el comentario, estuve navegando por tu blog y encontré Shadowbox. Incluso lo guardé como alternativa a Lightbox por si no tenía arreglo.

    Acabo de eliminar Lightbox (porque cambiar de plantilla, con todos los cambios que tenemos hechos, es un rollo a estas alturas) e instalar Shadowbox. Se ve perfecto. Me respeta el cambio de tipo de imagen, y se ve muy limpio.

    De todos modos, no descarto que sea la plantilla el origen del problema, porque ya nos ha dado más de un quebradero de cabeza...

    Lo dicho, muchas gracias por tu respuesta. ¡No me extraña que el blog tenga tantas visitas! :)

    Saludos

    ResponderEliminar
  150. Sí es posible que sea la plantilla, hay unas que dan muchísimos problemas, pero bueno, lo importante es que por lo pronto ya tienes funcionando un tipo de ventanas modales.

    Saludos!!!

    ResponderEliminar
  151. Hola!! A ver si me pudieras resolver una gran duda. Seguro que es una tontería pero ahí va...¿Cómo puedo poner varias imágenes en la misma fila en la previsualización de las ventanas modales (en las pequeñas)??
    GRACIAS DE ANTEMANO
    Saludos

    ResponderEliminar
  152. Sólo agrega los códigos de las imágenes en fila horizontal, es decir, sin dar saltos de línea, que sea uno detrás de otro.

    Saludos.

    ResponderEliminar
  153. De verdad que eres un Dios de los Blogs, muchísimas gracias por la ayuda, ya van varios trucos que saco de este glorioso blog para aprovecharlos en el mio y quede casi casi como de un profesional, ya tienes a tu fan #1! :D

    ResponderEliminar
  154. Hola, que tal! exelente herramienta, le da mucha profesionalidad a la galería de imagenes... me gustaría personalizarla... bueno, ya lo hice desde el archivo CSS... solo tengo una duda.. no he podido cambiar la imagen de "Close X" pues no encuentro la url() como en el caso del prevlink y el nextlink y me gustaría tenerlo en español... se podrá hacer eso? de antemano agradezco tu ayuda! éxito!

    ResponderEliminar
  155. hola, para crear una galeria con lightbox, las imagenes deben estar en una todas juntas, como se debe llamar la carpeta? por que debo crear varias galerias, pero separadas unas de otras...

    Gracias ojalas me puedan ayudar...

    Saludos

    ResponderEliminar
  156. El Ángel Exterminador, te agradezco mucho tu comentario :D

    Delirium Creative, eso se hace editando el archivo .js especificamente donde dice fileBottomNavCloseImage

    jorge, no he entendido bien la pregunta; la única forma de crear las galerías es agregando lo que se menciona ([nombredelagaleria]) ya con eso es suficiente, no importa dónde estén las imágenes.

    ResponderEliminar
  157. las imagenes las tengo que subir aun servidor tipo imageshack o algo asi o directamente en la entrada con el boton añador imagen?? es que no consigo que haga nada

    ResponderEliminar
  158. En cualquiera de los dos está bien. De hecho el problema que tienes no es ese sino que tanto el archivo lightbox.js y lightbox.css los has subido a un servidor que te da un link para descargarlos, no para leerlos y ejecutarlos.

    ResponderEliminar
  159. que servidor me recomiendas?? lo hice en dropbox

    ResponderEliminar
  160. bueno yo tengo el blogspot.com, me han dicho que al no tener mi propio hosting no puedo ponerlo

    ResponderEliminar
  161. No los tienes en Dropbox sino en Badongo. En Dropbox sí te funcionará.

    ResponderEliminar
  162. en efecto en dopbox si me funciona, muchas gracias, una ultima cosa, es que soy bastante torpe, cuando sale la foto en grande, sale demasiado grande, como puedo hacer para que no salga tan exagerado, gracias

    ResponderEliminar
  163. Pues lo más adecuado es que edites la foto para que esté más pequeña, esto igual servirá para no hacer tan pesado el blog.

    ResponderEliminar
  164. lo que no entiendo es que para que me funcione tengo que tener abierto la pagina de dropbox,y si estoy en firefox tengo ke tenerlo abierto en firefox y no funciona en IE, y cuando lo abro en IE me funciona alli pero no en firefox, menudo lio

    ResponderEliminar
  165. ya lo he resuelto, era el enlace, gracias, jeje

    ResponderEliminar
  166. Hola Potro!me funciono perfecto,podrias pasar y decirme si las ves bien?
    http://fotoblog-cocofansclub.blogspot.com/2010/10/imagenes-programa-1310.html

    muchas gracias!

    ResponderEliminar
  167. Potro buenas!

    Muy buena la he probado en otros lugares y me funciona, lo malo es que en este blog que he creado no me funciona, tendrá conflicto con algún otro script?, ojala me puedas ayudar...

    Gracias anticipadas

    ResponderEliminar
  168. Posiblemente sea por algún otro script. Podrías probar con Shadowbox.

    ResponderEliminar
  169. Hola. Tengo un problema. Intenté instalar en script, pero parece que interfiere con los widgets "Comentarios recientes" y con el de "seguidores." Sospecho que lo que interfiere como tal no es lightbox, sino Scriptaculous, pues la otra vez intenté añadir las flechas "Ir arriba" e "ir abajo" usando ese script y ocurrió lo mismo. ¿Sabes a qué se debe esto o tienes idea de lo que pueda estar ocurriendo?

    ResponderEliminar
  170. Efectivamente es por Scriptaculous. Puedes probar con Shadowbox, seguro con él no tendrás problemas.

    ResponderEliminar
  171. hola soy nuevo en esto de blogger,ya puse las imagenes en ventanas modales con lightbox y me quedaron bien y puse boton de ir arriba y abajo y quedo bien no pude installar shadowbox pero ase poco encontre algo que me llamo la atencion videolightbox en esta url.-http://videolightbox.com/es/index.html y quiero saber si me podrias decir si se puede usar en blogger y como se instala ya que hice mi galeria pero no supe ponerla en mi blog http://mcucreworldstreet.blogspot.com/

    ResponderEliminar
  172. En realidad ese mencionas no es parte de este tipo de Lightbox como el que se menciona en esta entrada aunque comparten un nombre similar son cosas distintas.
    Es más recomendable que uses Shadowbox pues ahí puedes abrir tanto videos como imágenes, y en el caso de Videolightbox no es compatible con el Lightbox que se explica aquí.

    Esta semana publicaré una entrada sobre cómo utilizar Videolightbox para que despejes tus dudas, pero insisto, si tienes problemas con Shadowbox no estaría mal que dejes tu pregunta en la entrada de Shadowbox para que veamos cuál puede ser el problema del porqué no te está funcionando y vemos cómo podemos solucionarlo.

    De cualquier forma como te dije esta semana publicaré el que deseas para que tengas más opciones.
    Saludos.

    ResponderEliminar
  173. Hola. Muchas gracias por este truco, me funcionó muy bien mientras mi blog tenía la dirección blogspot.com... Ahora que cambié y le puse un nombre de dominio, ya no funciona el efecto. ¿Sabrás algo al respecto? Gracias!

    ResponderEliminar
  174. Hola Bettero Soy,

    Lo que sucede es que los archivos que hacen que funcione están alojados en Google Sites y por alguna razón los archivos que se alojan ahí dejan de funcionar para los dominios propios.
    La solución es que subas esos dos archivos (los que están en color verde) del primer código y los subas a otro alojamiento como Filden o Dropbox.

    ResponderEliminar
  175. Hola,

    Sucede que seguí el procedimiento como lo señalas alojando en mi propio sitio los archivos de este post, y funciona a medias porque si ven mi blog: http://glixoom.blogspot.com/p/aladas-i-winged-i.html las imagenes cambian de tamaño, quedan pequeñas al marco de la ventana modal o exageradamente grandes, si se actualiza la página igual. ¿cómo podría solucionar esto? Mil gracias,

    ResponderEliminar
  176. No he podido verlo funcionando pues los archivos los subiste a Google Sites con los permisos en Privado.
    Si los archivos están en Privado entonces sólo tú puedes verlos o ejecutarlos.

    ResponderEliminar
  177. Ups no tenía idea, ya lo compartí mil gracias.

    Glixoom

    ResponderEliminar
  178. Quise corroborar que ya estuviera funcionando pero parece que ahora están mal las URLs de los archivos :/

    ResponderEliminar
  179. Ya solucioné el problema, no voy a utilizar lightbox porque corro el riesgo de que algo no funcione. De todas formas mil gracias, tu blog es muy útil.

    ResponderEliminar
  180. Hola! Lo que sucede en mi blog es que las ventanas modales son mas chicas que algunas imágenes...no se cual será el problema
    Saludos!

    ResponderEliminar
  181. Pues se supone que la ventana modal se redimensiona automáticamente a la medida de la imagen.
    ¿Ya probaste usar Shadowbox? Me parece que es mejor alternativa.

    ResponderEliminar
  182. Hola Potro. He tratado d descargar los archivos pero simplemente no lo logro. Será por mi tipo de navegador por lo que mi pregunta es si hay posibilidad de instalar el archivo de lightbox.js directamente en la plantilla (si fuese el caso me podrías proporcionar el código en .txt al igual que el archivo .css.
    Mi email es mentedeholandes@gmail.com.
    D antemano, gracias y espero no sea pesado para ti.

    ResponderEliminar
  183. Hola AUB'S,

    Si el navegador te pregunta eso sólo indícale que no lo haga para que pueda guardar el archivo de forma normal.
    Sino también puedes probar descargarlo desde otro navegador.

    ¡Saludos!

    ResponderEliminar
  184. Tengo una duda, quiero colocar el lightbox, pero ya tengo el slider de iamgenes con jquery, cuando coloco el ligthbox no aparece el slider de imagenes y solo funciona el lightbox.
    Mi pregunta es si se pueden poner los 2?

    ResponderEliminar
  185. Necesitas usar un parche para que ambos scripts sean compatibles:
    http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

    ResponderEliminar
  186. Hola Potro,

    muy bueno el aporte, sí señor

    mi duda es... se podría hacer que funcione con cualquier imagen que publiques sin tener que poner el código?
    Es decir, la inserto desde blogger pero no pongo ningún código, y ya funciona el código
    se podría hacer?

    saludos

    ResponderEliminar
  187. Lamentablemente no, ningún truco puede automatizarse pues para ello tendríamos que acceder al sistema de Blogger para hacer las modificaciones y eso es imposible :/

    ResponderEliminar
  188. Imposible is nothing, toca hackear Blogger :-P jajaja

    Bueno, bromas a parte (broma de momento :-P), pongo el código y tal y funciona, pero algunas imágenes no se ven "bien" con el efecto, te dejo el link y lo ves, es en la última entrada publicada, la primera imagen se ve bien pero el resto...
    http://soteavatares.blogspot.com

    ResponderEliminar
  189. Jajaja, bueno, para los que no somos hackers sí nos es imposible :P

    Este tipo de ventanas modales tiene muchos conflictos con varias plantillas, te recomiendo que mejor uses Shadowbox el cual presenta mejores resultados además que no solo puedes mostrar imágenes sino que también puedes mostrar videos, páginas, mapas, etc.

    ResponderEliminar
  190. Potro me sirvio muchisimo !

    Gracias ! :)

    ResponderEliminar
  191. Hola Potro!...

    Nuevamente yo molestandote, es que le estoy haciendo reformas a mi blog, y utilice este efecto tuyo y me quedo padrisimo, pero sabes que! quisiera ponerle un bordesito a las imagenes pequeñas de la galeria como para que se separen unas de las otras y no queden todas juntas!...

    Espero entiendas mi enrredo!...☺

    Gracias Potro, espero tu respuesta!...

    ResponderEliminar
  192. Hola Circulo W.H.,

    Al código de la imagen sólo agrégale lo que está en negrita:

    <a href="URL de la imagen" rel="lightbox"><img width="150" src="URL de la imagen" style="border:3px solid #000;" /></a>

    En ese ejemplo es un borde negro de 3px de ancho pero tú lo puedes modificar por el que gustes.
    Saludos!

    ResponderEliminar
  193. Jajajaja Eres un Mago potro!...

    De verdad estoy muy agradecido, yo ni me imagine que esta era la forma de poner un borde, pense que era con "border" y lo mejor fue que me quedo espectacular!...

    Gracias Nuevamente Amigo!...

    ResponderEliminar
  194. Qué bueno que te quedó tal como esperabas :)

    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