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.
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>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</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 grande" rel="lightbox"><img src="URL de la imagen pequeña" /></a>
Sólo cambia la URL de la imagen grande y la URL de la imagen pequeña. 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 grande" rel="lightbox[galeria1]"><img src="URL de la imagen pequeña" /></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.
Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Unirse en Facebook
Enviar un correo
Iconos RSS.PNG)
Música JPZ
156 comentarios:
Perfecta galeria para el Blog.
Ese tipo de efectos me encantan.Muy bueno post.
Saludos!
Igual a mí me gustan mucho aunque a veces suelen ser muy lentas.
Saludos!
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.
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.
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
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...
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
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!!!
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!
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
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!!
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!!
que grande Potro!!! Vos sorprendiendo como siempre, muy bueno esto de Lightbox, ya lo implemento en mi blog.
Che quiero saber una cosita, yo quiero que una persona no entre a mi blog, yo tengo su IP, vos sabes que código hay que poner en la plantilla??? Te cuento que no quiero que entre por que me saca todas mis cosas, se hizo un blog a costilla mia, tienen todo lo mio. :@
Espero tus respuestas.
Abrazo!
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/
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
Ok gracias ahí lo miro. ;)
Potro ayuda no me anda lo de las imagenes no se por que :S
No me funciona nada a mi me quiero morir, lo de chicablogger me dice esto:
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 content of elements must consist of well-formed character data or markup.
Sabes por que???
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.
No, esta todo bien los códigos es algo que no lo deja funcionar igual que lo de los seguidores por que en el blog de pruebas si funciona, probé sacando el mapa de abajo de google y funciono pero solo segundos, así que no se que sera lo que no lo deja funcionar, y lo del IP me salta eso que te puse arriba.
Mil millones de GRACIAS!!!!! Eres un fiera porto!
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 ;)
Ok gracias! pero yo te decía de el Lightbox que tampoco funciona y por ahí si funciona por ahí no, de a ratos anda y la verdad que no entiendo por que, si algun código de algo lo estara perjudicando. :S , no lo puedo solucionar, ya puse todos los mismos códigos que tengo en la web en el blog de pruebas pero nada, sigue funcionando en el blog de pruebas pero en la web no, miralo
Blog de pruebas: http://planetagrandt-pruebas.blogspot.com/
Web: http://www.planeta-grandt.com.ar/
Espero me sepas decir por que sera, sino no importa compañero, gracias por todo!
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.
Te digo la verdad no se nada de hosting ni se que es ni para que sirve, jejejeje
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
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 ;)
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!
muy padre lo boy a intentar
Jajajaa, que rápido que viniste Trucoteca, jajajaja, hola!
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...
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!
Tapachula, seguro te saldrá bien ;)
Ascesino96, qué curioso, pensé que todas estas nuevas generaciones ya nacían con el gen del Internet (?)
Potroo, gracias ^^, ojalá si publiques un tuto sobre emoticones :P! Saludos y gracias de nuevo
Gracias Potro! ya lo instale y todo pero ni idea como usarlo, jejeejej
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
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!
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?
Potro que bronca que tengo!!! :@
No lo puedo hacer andar al Lightbox, me hice otro blog exactamente igual con todos los mismos gadgets y códigos en la plantilla y en ese si funciona pero en la web principal no :S , no puedo encontrar cual es el código que lo perjudica por que seguro hay algún código que no lo deja funcionar :S y no me doy cuenta cual sera.
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.
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
Naaaa, no te creas, sí me gusta la plantilla pero por ahora no pienso cambiarla ;)
excelente ,ese ese efecto lo habia estado buscando gracias ;)
Ojalá te sea útil ;)
Como Añado la galeria?, osea si tengo 15 imagenes como las coloco :s no entiendo ;)
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.
osea que rel="lightbox[galeria1]" es por cada imagen que vaya poner? si son 15 imagenes son 15 rel="lightbox[galeria1]" ?
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.
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="
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.
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!
Con este no pero hay algunos que sí lo permiten. Si me es posible lo publico esta semana.
Saludos.
Muchísimas gracias potro. Que "dios" te lo pague con muchísimas visitas ;)
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/
En este tutorial se explica cómo obtener la URL de los archivos en Dropbox.
Saludos.
Llevo unos días viendo y probando diferentes entradas de tu blog para hacer el mío, y gracias a ti he conseguido lo que pretendía.
Muchísimas gracias.
http://santidd.blogspot.com/
Gracias a ti por tu visita y tus comentarios :)
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!
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.
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!
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
sobre las imagenes grandes y pequeñas que tamaños recomiendas? y de ke medidas son las de tu ejemplo?
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.
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...
Quizá haya alguno en la red que explique cómo, o incluso en la página de Vimeo puedas encontrar información.
Saludos.
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
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.
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!
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.
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
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.
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
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.
Bueno Potro, no me funcionó que pena! Tanto que me gustaba ese estilo que se va hacer!
Gracias de todas maneras! Saludos!
Ojalá y los programadores de Internet Explorer puedan solucionar de una vez esos problemas que siempre aparecen :S
si bueno! Potro podras hacer un tutorial mejor explicado sobre este informe parecido : http://www.cabel.name/2008/02/fancyzoom-10.html
Saludos
Gema tiene una entrada reciente sobre ello:
http://gemablog-.blogspot.com/2010/03/galeria-con-jquery-fancy-thumbnail.html
Saludos.
Hola amigo Potro, no sabes como se puede hacer para que cuando el cursor pase sobre la imagen aparesca una lupa,
gracias
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.
Muchas Gracias amigo Potro, voy aprobarlo, despues le cuento
Hola no se como instalar el script...me ayudas
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.
He estado intentado conseguir este efecto y ha sido en esta web donde me he conseguido enterar. Felicidades por la explicación.
Saludos.
Entonces qué bueno que has llegado hasta acá, eres bienvenido las veces que lo desees.
¡Saludos!
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
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.
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!
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!
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.
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.
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.
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.
¿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"?
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?.
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?.
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.
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!!
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.
@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 :(.
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
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.
@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.
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.
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??
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!!
Perfecto, qué bueno que ya pudiste arreglarlo ;)
¡Saludos!
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.
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
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.
Eran los códigos de shadowbox que tenía comentados. Los he quitado, pero nada.
Pues no se me ocurre qué más pueda ser :s
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... :-(
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.
Ya casi funciona. Te comento en el artículo de Shadowbox.
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?
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.
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.
Te agradezco tus comentarios, seguro te quedará muy bien tu galería :)
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? =)
Las imágenes están alojadas en el archivo .css pero yo las veo funcionando en tu blog sin problemas.
jajaja si las ves funcionando por que ahorita esta trabajando con tus links! ouch! :S
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.
Muchas gracias me ha servido
es justo lo que buscaba para mi blog de diseño
saludos
Qué bueno que encontraste lo que estabas buscando.
Saludos.
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/
Felicidades por tu blog y mucho éxito.
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?
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.
http://jardinrehilete.blogspot.com/ es en este el scrol no me funciona cuando pongo lightbox :s
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.
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.
Hay que editar tanto el archivo CSS como el archivo JS, en ellos busca las URL de las imágenes que quieres cambiar.
Saludos.
lo ke kiero eske aparezca la palabra close y la cruz de cerrar ke solo aparece un interrogante azul ? es por eso??. gracias
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.
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.
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.
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.
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.
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/
osea no me anda la imagen grande, solo la imagen pequeña, me abre y me deja espacio en blanco u.u
ya me se que es, es por mi plantilla u.u, pero no tengo ni idea cual puede ser el problema xd
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.
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
No, no es posible.
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..
@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
Ummm no, lo que él quiere es que al subir la imagen desde Blogger ya cargue con el código y no se puede.
hola
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
Mira esta entrada, ahí hay un slider que te puede servir.
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?
aa y otra cosa mi potro ( a como molesto)
como lo pongo en las entradas?
y tambien como pongo varias fotos
te agradeceria y me ayudaras potro
gracias
No tengo idea, nunca lo he usado y desconozco el procedimiento para instalarlo :(
mm ni modo
pero como varias fotos ?
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.
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.