JMiur [E]

Hace tiempo que busco una forma de poder mostrar imágenes en una ventana independiente del blog; algo que permita hacer click y que se abra rápidamente sin salir de la página. En realidad, hay muchas rutinas y ejemplos de esto, pero, o no sirven en Blogger, o son muy pesados o son muy complicadas de utilizar.

Aunque no dejaban de ser interesantes, descarté Prototype y sus variantes, Hoverbox, GreyBox, WZ_Tooltip y Lightbox, aunque fue el que más cerca estuvo de cubrir mis necesidades.

Finalmente, un script de DynamicDrive terminó (por ahora) con mi búsqueda.

Este es un simple EJEMPLO.

Image Thumbnail Viewer es una rutina muy sencilla, de apenas 7KB que puede aplicarse a cualquier enlace para cargar una imagen sin necesidad de esta escribiendo códigos interminables, basta agregarle a la etiqueta del vínculo, el atributo rel="thumbnail".

El diseño de la ventana que contendrá la imagen es fácilmente personalizable y podemos elegir si queremos que se agregue algún texto a modo de título o si queremos que se abra con un efecto tipo fade.

Lo primero que necesitamos es descargar el archivo thumbnailviewer.js y editarlo para establecer nuestras opciones.

Abrimos el block de notas y allí, al inicio del archivo, nos encontraremos con esto:
// -----------------------------------------------------
// Image Thumbnail Viewer Script- By Dynamic Drive
// available at: http://www.dynamicdrive.com
// Last updated: Jan 22nd, 2007
// -----------------------------------------------------

var thumbnailviewer={
enableTitle: true,
enableAnimation: true,
definefooter: '<div class="footerbar">CLOSE X</div>',
defineLoading: '<img src="loading.gif"/> Loading Image...',
El resto del archivo no nos interesa, en esas cuatro líneas está todo lo necesario para configurarlo:

enableTitle: podemos poner true si queremos incluir textos en las imágenes o false si no queremos.
enableAnimation: podemos poner true si queremos incluir el efecto fade o o false si no queremos.
definefooter: esta línea define la forma en que se mostrará un pie de página en la nueva ventana que nos permitirá cerrarla. Simplemente, podemos cambiar el texto CLOSE X por cualquier otro.
defineLoading: esta línea define la forma en que se mostrará una advertencia mientras se va cargando la imagen. Podemos colocar cualquier imagen de carga, por ejemplo: loading.gif que debemos alojar previamente en algún servidor y luego copiar la dirección URL correspondiente y, además, cambiar el texto o eliminarlo.

Una vez hecho esto, guardamos el archivo y lo subimos a un servidor.

Ahora, nos toca establecer las propiedades CSS de la ventana; para esto, hay dos métodos. El primero es bajar el archivo correspondiente: thumbnailviewer.css, editarlo y subirlo a un servidor propio.

Si empleamos este método, en la plantilla de Blogger incluiremos ambos archivos, la hoja de estilo CSS y el script, ambos en el HEAD de nuestra plantilla, por ejemplo, inmediatamente antes de la etiqueta </head>:
<link rel="stylesheet" href="URL_thumbnailviewer.css" type="text/css" />
<script src="URL_thumbnailviewer.js" type="text/javascript"></script>
El segundo método consiste en copiar y pegar el contenido del estilo en la plantilla, de este modo, es más sencillo de editar y retocar cuantas veces queramos, algo que, con un archivo externo, nos obligaría a tener que reemplazarlo una y otra vez. En este caso, procedemos de manera similar, en el HEAD de nuestra plantilla, inmediatamente antes de la etiqueta </head> agregamos lo siguiente:
<style type="text/css">

/* este es el rectángulo total de la ventana */
#thumbBox {
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px; /* el ancho del borde */
padding-bottom: 0;
background: #313131; /* el color de fondo */
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

/* este es el rectángulo del pie de página */
#thumbBox .footerbar {
/* propiedades del texto "CERRAR" */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: #FFFFFF;
padding: 5px 0;
text-align: right;
/* propiedades que podemos agregar: background-color, border */
}

/* es el rectángulo interior que contendrá la imagen y el eventual título */
#thumbBox #thumbImage {
background-color: #FFFFFF; /* el color de fondo */
/* podemos agregar otras propiedades, por ejmeplo, para las fuentes de los textos */
}

/* es la advertencia de carga que se muestra antes de abrirse la ventana */
#thumbLoading {
position: absolute;
visibility: hidden;
border: 1px solid black; /* el borde */
background-color: #EFEFEF; /* el color de fondo */
padding: 5px; /* márgenes */
z-index: 5;
/* podemos agregar otras propiedades para las fuentes, etc */
}
</style>

<script src="URL_thumbnailviewer.js" type="text/javascript"></script>


Bueno, ya está, ahora podemos usar la rutina en cualquier parte del blog, en un post o en la sidebar.

Este, es el código de un enlace normal:
<a href="URL_imagen">ENLACE</a>
Este, es el código de un enlace utilizando el script:
<a href="URL_imagen" rel="thumbnail" title="texto">ENLACE</a>
Como se ve, sólo agregamos dos cosas. La primera, rel="thumbnail", esto es obligatorio, en realidad, es lo que hace que funcione el script. La segunda, title="texto" es opcional y sólo la usaremos si hemos puesto enableTitle=true.

El script puede utilizarse en cualquier tipo de enlace.

112 comentarios:

Anónimo  

Pero eso no es lo que ya hace Snap...?

O te refieres a otra cosa?

:|

Responder
JMiur  

No, son dos cosas totalmente diferentes. Snap, de forma automática, muestra una "imagen" de una página web.

Esto, se trata de mostrar tus propias imágenes de una manera distinta, sobre todo, aquellas que son demasiado grandes.

Muchas veces, en lugar de poner la imagen en el blog, ponemos un enlace a esta imagen, para que se abra den otra ventana. Este tipo de scripts, permite abrirlas en la misma página, sin tener que recargar nada.

Me temo que no he sido muy claro :$

Responder
Anónimo  

Sí lo has sido, sí.

Snap te muestra la imagen del enlace, lo que buscabas tú es otra cosa... :)

Una más compleja.

Ves como sí?

:|

Responder
JMiur  

Jajaja sí, algo así. Lo que busco es mostrar una imagen mia en una ventana especial que no interfiera con el blog ni se cargue en otra ventana :)

Responder
aivankid  

Hola JMiur! Soy el del blog de chanante! He perdido la cuenta de gmail, me dice que no existe xD, inédito.

Pasaba a saludarte por si me habias contestado el mail ya que no te podia responder!

Me he hecho un blog nuevo con 2 amigos, de descarga directa de musica, nos esta quedando genial!

Un saludo y gracias por todo

Responder
JMiur  

¿Cómo es eso? XD

El último mail que te contesté fue sobre el tema de la encuestas que no funcionaban y el último que recibí fue cuando me decías que habías logrado solucionarlo. Esto fue hace dos dias: es increible !!!

Bueno, espero que sigas bien y que tengas suerte con esos nuevos blogs. Por lo que vi, están muy bien :D

Sigo sin entender ... ¿las cuentas de Google se pierden?

Responder
Anónimo  

Firefox me muestra la imágen, IE me muestra un archivo, el que puedo mirar o bajar.Se ve cool :D

Responder
JMiur  

IE esta colmando mi paciencia, hoy hace una cosa, mañana otra, me muestra algo, luego lo quita. Estoy empezando a no entenderlo :D

Probablemente se trate de alguna configuración en la parte de seguridad pero no tengo idea. Intentaré averiguar :)

Responder
Anónimo  

Algo hiciste o los enanos se asustaron al escuchar los ladridos de mastines? :S

Responder
JMiur  

Juro que no.

Si supiera qué hacer, lo haría :D

Responder
Anónimo  

Que elegante! Esto es para utilizarlo sí o sí como visualizador por defecto :)

Muy buen post

Responder
JMiur  

Sin duda es un gran efecto y ya lo tengo incorporado a mi plantilla. Se ve que no te diste cuenta pero ya lo había usado ACÁ.

Me gustaría saber por qué a veces en IE no se ejecuta.

Responder
Anónimo  

La barra de progreso te quedo espectacular. Imagino que hacer que funcione en IE debe ser más trabajoso que todo lo demas ^^

Responder
JMiur  

Se supone que debería andar, es más, funciona, pero en Blogger, de tanto en tanto, en lugar de ejecutarse el script o se abre otra ventana o aparece el gestor de descargas. No parece tener sentido.

¿Será que IE a veces no carga algo pero no lo dice?

Responder
Anónimo  

¿No decías al inicio que sólo "basta agregarle a la etiqueta del vínculo, el atributo..."?

o_0

Responder
JMiur  

Así es, basta tener el script y agregar el atributi en la etiqueta. No hay secretos. Es realmente muy sencillo de implementar.

En IE el problema surge cuando no la página se carga debidamente, algo que a veces suele pasar pero, normalmente, funciona correctamente en cualquier navegador a menos claro, que se tenga deshabilitado JavaScript.

Responder
Anónimo  

una pregunta o consulta como le hago para que los comentarios aparescan en la misma pagina del blogger de la publicacion asi como en el tuyo sabes agradeceria tu respuesta a david_arthuro@msn.com

Responder
Gem@  

No había visto esta entrada :( es un efecto espectacular pero si en IE no funciona... me temo que no voy a probarlo :(

Responder
JMiur  

Puedes intentarlo tranquilamente porque SI, funciona en IE (ver captura) y también en Opera (ver captura)

Es una de las mejores soluciones para mostrar imágenes "grandes" porque es un script muy simple y muy liviano.

Responder
Gem@  

¿En la sidebar también funciona? ¿o el espacio no dejaría mostrar la imagen completa?

Responder
JMiur  

Funcionaría perfectamente, Gem@, no importa el espacio ya que siempre se abrirá en el centro de la pantalla, esa es una de las ventajas que tiene.

Podrías poner miniaturas en la sidebar que se abrirían a tamaño completo sin importar su tamaño y sin abrir una nueva ventana.

Responder
Gem@  

Prepárate que van a llover preguntas, voy a probarlo.

Responder
Gem@  

¿Qué te dije? ahí va la primera:
Hice todo paso a paso el caso que añadí en la plantilla las dos opciones (no presté atención por lo que se ve )y ahora al intentar eliminar la primera opción la plantilla me da un error que intentaré solucionar.
La consulta es que la imagen del loading no sale en ningún lado. La Url la añadí al bloc de notas, lo guardé y alojé el archivo en Google Page luego la url del archivo la agregue al lugar correspondiente en la plantilla ¿qué hice mal?
Tengo la imagen en la sidebar justo encima de los últimos comentarios (es una prueba)

Responder
JMiur  

Uyyy! ¡qué lindos pescaditos! Hoy no había visto tu blog :D

Espera: "Marcar este enlace" ... bien, ya está, tendre que aprender a robar más sigilosamente :D

OK. Volviendo al tema.

No hay ningún error, está perfecto, lo que ocurre es que la imagen de prueba es pequeña y, como no hay demoras en la carga, no ves la advertencia de "loading".

Acabo de probarlo online con otra imagen más grande y aparece, usas el mismo que yo. Por supuesto, esto, lo pruebas una vez y lo verás pero la segunda vez no porque la imagen habrá quedado guardada en la cache y no habrá demoras.

En resumen, está funcionando perfectamente bien.

Lo que si he notado es que si la imagen expandida se superpone con el Feed Flash. Parece que este último, aparece en primer plano (CAPTURA)

No sé si con todos los archivos de Flash pasará lo mismo, en todo caso, es cuestión de reubicar las cosas o desplazar la ventana hacia abajo.

Responder
Gem@  

Entonces todo correcto, yo no veo el efecto que comentas hice una captura con Firefox y otra con IE.
De todas formas es un dato a tener en cuenta.

Si además de los peces te gustan los perros y las tortugas también tengo pero de verdad :)

Responder
JMiur  

Si quieres ver el gif de loading, haz la prueba con una imagen MUY GRANDE.

Responder
Gem@  

Pues si... con la imagen de mayor tamaño si sale.
Pero la he quitado, amenazaba con salir de la pantalla :)

Responder
JMiur  

Jajajaja, bueno, por lo menos has probado que existe :D

Responder
Gem@  

Ya está, espero que des el visto bueno, en realidad es un efecto que me encanta, lo veo muy útil y funcional.
He tomado cosillas de tu entrada, pero los archivos que añado están en mi servidor.
Gracias por los datos y que la próxima no tarde mucho :)

Responder
JMiur  

¡Excelente Gem@ !!! Habrás visto que este fue bastante sencillito :D

Coincido contigo, me parece muy pero muy útil :)

Responder
Unknown  

hola amigos los saludo con agrado e interes soy nuevo en la utilizacion de blogspot alguien me puede de cir como crear sub blogs es decir, por ejemplo, tengo un blog de una marca de dulces... http://dulcescarlitos.blogespot.com con sede en colombia pero teniendo otras subcedes en costa rica, panama,ecuador, honduras como hacerle para que al entrar a la bloguer principal de dulces carlitos tenga yo vinculos que me enlacen a un ¿bloguer? que contenga la informacion etc,tec, correspondiente a cada pais.
¿se tendria que hacer un bloguer especial por cada pais o un sub bloguer se puede?

Responder
JMiur  

En Blogger no existe la posibilidad de hacer "subblogs" o páginas estáticas pero pueden crearse todos los blogs que se quiera con la misma cuenta. Cada uno es independiente aunque pueden usar la misma plantilla y estar enlazados entre si.

Responder
Anónimo  

:-) ... buenos dias, tardes, noches.

No hace mucho descubri tu pagina,... Excelente,... en cuanto al analisis y desarrollo de los articulos que expones,... tambien soy asiduo lector de "DynamicDrive".

... me vendran muy bien tus notas, para aplicar de una vez, este formato de visor de imagenes,... gracias.

Salu2, ymmot ;-)

Responder
JMiur  

Gracias por el comentario, ymmot, me alegro que te sirviera.

Responder
Riverloom  

buenas , gran blog , tengo q leermelo mas atentamente, estoy intentando hacer el visor de imagenes y creo haberlo seguido al pie de la letra .. pero no me funciona, o sea con imagenes externas de cualquier pagina si, pero las imagenes q subo en el mismo blogger ( direccion tipo " http://bp0.blogger.com/_hwS3LTv.....JroBM/s1600-h/Pictu....ats+2.jpg " solo sale el cargando y luego nada ...

si pudieras decirme alguna solucion a parte de tener las imagenes hospedadas en otro lado lo agradeceria mucho .. muchas gracias de antemano ;)

Responder
JMiur  

Blogger es poco claro con respecto al uso de las imágenes que subimos.

Lo primero que deberías ver es si la dirección URL que colocas es la correcta. Por ejemplo:

http://xxxxxxxxxxx/s-1600/nombre.jpg

Eso en negrita, lo que está justo antes del nombre de la imagen es el directorio donde se guardan pero, hay varios diferentes s-400 s-320 etc) que son miniaturas y enlaces internos. La imagen real, la que siempre funciona está en el que se llama s00

Si esto no funciona, envíame por mail el código que escribes, lo más probable es que el error esté allí.

Responder
VECEDIOS  

que onda me interesa mucho tu post, por que necesito esa herramienta para un foto blog que acabo de abrir.. pero no he podido hacer que funcione.. pero no entiendo cuando dices subirlo a un servidor propio. donde puedo subir los scrips

Responder
JMiur  

Eso significa alojarlo en algún servidor. Puedes ver una forma sencilla de hacerlo AQUÍ.

En los próximos días voy a mostrar otra forma de mostrar imágenes de manera similar pero, todos estos trucos siempre requieren alojar scripts en algún lado ya que Blogger no nos permite hacerlo.

Responder
VECEDIOS  

fijate que los logre subir a goggle page creator los subi tal y como las baje de la pagina de scrips....y puse las lineas tal y como dijiste en vi plantilla pero no me funciono .. deseguro algo hago mal

Responder
JMiur  

En estos momentos, no veo que en tu blog haya algún código colocado:
http://cazadordemomentos-vecedios.blogspot.com/

Confirmame si esa es la dirección correcta para poder verlo online.

Responder
VECEDIOS  

si para ese lo quiero

Responder
JMiur  

Bien, ahora se ve el código.

El problema está en que estás utilizando el código que agrega Blogger cuando inserta una imagen. Voy a tomar como ejemplo el primer post que resumido dice esto:

<p>
<a title="clic" rel="thumbnail"
href="http://bp3.blogger.com/.../s1600-h/casa.jpg"
onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}">
<img border="0" id="BLOGGER_PHOTO_ID_xxxxx"
alt="" title="texto" rel="thumbnail"
src="http://bp3.blogger.com/......../s400/casa.jpg"
style="margin: 0px auto 10px; display: block;
text-align: center; cursor: pointer;"/>
</a>
</p>

Primero que nada, la imagen original siempre se guarda en este lugar:
http://bp3.blogger.com/.../s00/casa.jpg

Es cualquiera de las direcciones que te da Blogger pero, el último directorio es s00.

Como debemos usar dos imágenes, aprovechamos la original y el thumbnail que creo Blogger:

la original
http://bp3.blogger.com/.../s00/casa.jpg

y el thumbnail
http://bp3.blogger.com/.../s400/casa.jpg

Sabiendo eso, el código es mucho más sencillo:

<p style="test-align:center">
<a title="clic" rel="thumbnail"
href="http://bp3.blogger.com/.../s00/casa.jpg">
<img src="http://bp3.blogger.com/.../s400/casa.jpg"/>
</a>
</p>

Todo escrito en una sola línea.

Puedes ver el resultado en mi blog de pruebas: AQUÍ

Responder
VECEDIOS  

Que honda Jmiur muchísimas gracias por el tiempo dedicado me siento un bichito a tu lado.. Ni con tu ayuda pude lograr que funcione .. me abre la imagen como si la quisiera descargar.... creo que me esperare al proximo post... muchisimas gracias hermano

Responder
JMiur  

Lamento que sigan los problemas.
Te adelanto la dirección de la librería de la que hablo:
http://www.digitalia.be/software/slimbox

El concepto es similar aunque requiere más archivos. Sea cual sea la que uses, deberás olvidarte del código de Blogger y manejar manualmente las direcciones URL de las imágenes.

De cualquier manera, debería funcionar y el script que has puesto es correcto. Si quieres, me envias un mail y te envío el código exacto para la imagen de prueba que utilicé. Si eso no llega a funcionar, ya sería cuestión de brujería :D

Responder
VECEDIOS  

pues mi correo es vededios@hotmail.com o vecedios@gmail.com me gustaria probar con el codigo que tu usaste en la prueba ojala y funcionara.. saludos y de nuevo mucho gracias

Responder
VECEDIOS  

perdon los dos son vecedios no vededios

Responder
JMiur  

Acabo de enviar el mail, espero que sirva de ayuda.

Responder
Anónimo  

Bueno aportacion

¿pudes darme la url de un server gratuito? eso es para poder subir los archivos .css y.js

gracias

Responder
JMiur  

Lo más sencillo es usar Google Pages. AQUÍ hay un tutorial de cómo hacerlo. Es muy sencillo.

Responder
Anónimo  

Lo probe y esta genial solo tengo una bendita duda cuando carga la imagen me lo hace debajo de los swf que tengo como banner, como puedo solucionar esto.
Gracias
Pablo

Responder
JMiur  

Tendría que ver el sitio funcionando para probar si existe una solución.

Responder
Hoogo  

Tengo un problema con este visor de imágenes. Resulta que cuando trato de justificar el texto, no funciona.

Qué puedo hacer?

SaludHoogos!

Responder
JMiur  

¿Hay algún ejemplo visible online? Seguramente es un problema en las propiedades CSS que se colocan al texto.

Responder
tazmaneaK  

Que es un servidor externo? oO
Disculpa por mi ignorancia.

Responder
JMiur  

Un servidor externo es un sitio donde puedes guardar archivos de alguna clase. En Blogger, sólo puedes alojar imágenes por eso es necesario alojar los scripts y otros archivos en otro sitio.

Por ejemplo: Google Pages o Hostfiles.

Para el primero de los casos, puedes ver ESTE POST, allí está explicada la forma de usar ese servicio.

Responder
Anónimo  

Gracias!!!

Era justamente lo que necesitaba. Ya me estaba moliendo la cabeza con el fin de encontrar la forma de ampliar las imágenes!!

Lo voy a implementar esta misma noche y cuento si me fue mal...

Responder
JMiur  

Me alegra que te sirviera, Gunner :)

Responder
feraluj  

Hola Jmiur:
Te saludo con afecto.
Quiero automatizar la carga de imagenes de mi directorio de Bitácoras, ya que resulta muy pesado capturar las pantallas de los blogs, recortarlas, subirlas al servidor y luego presentarlas. He visto que en algunos directorios los enlaces muestran los snaps de origen, sin embargo, deseo tener los enlaces a la vista e manera permanente, esto es no que aparezcan cuando pasas el ratón sobre el enlace. Sanpshots no me funciona por la razón antes expuesta.
Podrías ayudarme solucionar esto?, existe algun script o algo que me permita discriminar los enlaces que yo requiera mostrar en la sección de posts y que la muestra sea permanente en unos 400 x 300 px.? o menos si no hay de otra.
He probado on algunos otros pero por ejemplo en algunos tengo que dar de alta primero el link en de.li.ci.us y luego cargar el mismo link en el post.
Disculpa la lata, pero realmente me ayudarías.
Feraluj

Responder
JMiur  

Lo más cercano que conozco a eso es SnapCasa. Hay que registrarse pero es gratuito.

Una opción que te aliviaría la tarea es solicitar a quienes se registran, que ellos provean las imágenes a mostrarse.

Estaré atento a ver si encuentro algo sencillo y que funcione en Blogger. En ese sentido, estamos un poco limitados.

Responder
José GDF  

Este elegantísimo visor de imágenes me funcionó a la perfección a la primera :) .

Bloguer@s como tú hacen posible que bloguer@s como yo podamos dar un toque personal a nuestras páginas.

Muchísimas gracias :D .

Responder
JMiur  

Me alegro que lo hayas conseguido :)

Responder
Raven  

Buenas JMiur,

estaba intentando con el script que comentas utilizarlo en todas las fotos de mi blog, pero son de tamaño bastante mas grande de lo que deberia verse en el visor, ya que las quiero con calidad aceptable en picassa para que se las baje quien quiera. Y no se como hacer para que al "llamar" al script en cada foto, me lo ponga de modo estandar a unos pixeles o a un %. Si modificas el css solo varias los cuadros y bordes y demas pero claro la foto sale original como la tenia alojada, osea muy grande.

A ver si puedes echarme un cable, son fotos de escalada y si alguien quere ampliar un poco se sale de la pagina (va a picassa) y es un poco lio, ya que son muchas fotos. Yo quiero que cuando la gente pinche en una miniatura salga siempre un cuadro ampliado pero mas o menos predeterminado a unos 800x600 px mas o menos. Uff que lio.

El otro problema lo tenia en el enlace a picassa de la foto, puse lo que decias arriba de s00 pero nada de nada, solo me funciona si quito del todo la parte de /s1600-h/ no entiendo porque pero por lo menos me funciona.

Vaya tostón he soltado, un saludo y gracias.

Responder
JMiur  

La única forma de automatizar eso es si en el CSS colocas algo así:

#thumbImage img {width:200px;}

Eso, por ejemplo, mostrará las imágenes de 200 pixeles de ancho, sin importar el tamaño original.

Otra forma es que en lugar de usar la imagen original de Picasa, uses alguna de las miniaturas que ellos mismos crean.

Responder
Anónimo  

hola!! muy buen blog!!:D
esta entrada me ha gustado mucho
pero tengo una duda...
mmm en donde dice con mayusculas ENLAZE
que es lo ke exactamenet debo de pone ahi??
he publicado sin ponele nada y solo me aparece la palabra enlaze que me abre a una ventana abriendome la imagen...
mejor guarde la entrada como borrador

ojala me puedas ayudar:$
saludos

Responder
JMiur  

Es correcto, si colocas esa palabra, verás esa palabra. Lo que no sé es que quieres que se muestre én lugar de esa palabra. Puede ser cualquier texto o una miniatura de la imagen.

Responder
Anónimo  

osea me refiero que no puedo hacer lo que pusiste en esta entrada, lo de las imagenes, ya puse los codigos en mi plantilla y al momento de subir una imagen en una entrada por ejemplo esta:

ENLACE

asi yo lo pongo, no se si este bien, y cuando miro mi blog para ver la entrada, aparece esa palabra enlace, y no me aparece la imagen, para cuando le de click se haga grande en el mismo blog

mi pregunta era que no se que debo de añadir donde esta la palabra enlace, enlace de que?? para que me pueda aparecer la imagen asi como la explicaste

sorry si no me explique bien :(
saludos!! :)

Responder
JMiur  

Como ves, el código que intentaste escribir no se ve ¿Por que no me envias un mail así es más fácil ecribirlo?

Dime. Tienes una imagen GRANDE, hasta ahi bien. Ahora, el enlace es eso donde harás click. Debe ser o un texto (la palabra "enlace" o cualquier otro tipo "haga click acá para ver la imagen"). También puede ser OTRA imagen pero más pequeña.

Responder
··¤(`×[¤ -LuN4T1K4- ¤]×´)¤··  

valla me paresio muy interesante tu post pero tengo una duda

Solo se puede hacer con 1 sola imagen o se puede agregar mas de una? digamos unas 20 imagenes?

me gustaria que me pudireas responder esa duda de ante manos gracias

Responder
JMiur  

Así como está escrito, sólo admite una imagen a la vez.

Responder
Kaph  

Hola, me funciono perfectamente el visor, pero en mi pagina tengo un pequeño problema, cuando la imagen se abre queda por detras de algunos elementos que estan en flash, por que me pasa eso?

Responder
JMiur  

Si, eso suele ocurrir siempre con Flash; tendría que ver el ejemplo para decirte pero, prueba cambair unapropiedad de #thumbBox; en lugar de z-index:10; coloca un valor muchoa mas alto, 1000, 5000, 10000.

Responder
Martin Lujan  

Hola JMiur,
realmente cada dia mejor tus tutoriales..
Hay alguna manera de que el comentario 67 pueda efectuarse?
Me interesa crear un albun de fotos con èsta aplicaciòn (u otra que no conozcamos todavìa)
Espero tu respuesta,
Como siempre.. muchìsimas gracias por tu amable atenciòn

Responder
JMiur  

No es un slideshow así que sólo admite una imagen. Para eso otro, se necesita algo más sofisticado como algún tipo de librería para generar ventanas modales tipo LightBox.

Responder
TvCelulares  

mil gracias me funciono de maravillas!, saludos!

Responder
TvCelulares  

te puedo hacer una pregunta?!

hay alguna forma que al hacer click en un segundo enlace no se borre la primer imagen?
ose que no se cierre como para que se abran varias imágenes en la pantalla a la misma vez
Saludos y gracias denuevo

Responder
JMiur  

No con este tipo de sistemas ya que la ventana que se abre, siempre es la misma y lo único que varía es su contenido.

Responder
TvCelulares  

agradezco tu respuesta (auque sea negativa jejeje)
Saludos y muchas gracias por responder!

Responder
Feche  

A mi no me funciona, me sigue abriendo la imagen en otra ventana

Responder
JMiur  

Tendrás que revisar lo que has hecho. Como no sé donde está tu ejemplo, nada puedo decirte.

Responder
José GDF  

Hace ya tiempo que tengo puesto este visor de imágenes, pero desde que tengo el dominio personalizado no me funciona. Sin embargo, si accedo desde la antigua URL de Blogspot sí que funciona. ¿Alguna explicación a este extraño fenómeno?

Debo decir que tengo todavía el cambio de URL en transición. La nueva URL propia ya funciona, pero con el blog abierto a través de ella este script no funciona, mientras que con la URL antigua acabada en Blogspot sí.

Espero haber explicado el problema con claridad. La verdad es que no entiendo por qué pasa esto. También han dejado de funcionar otros widgets, pero eso es ya otra historia.

Saludos.

Responder
JMiur  

Hasta donde yo sé, Google Sites no admite el hotlink de archivos fuera del subdominio de blogspot así que, como ese script lo tienes alojado allí, es probable que sea el motivo por el cual no funciona.

Responder
José GDF  

El siguiente paso era meter el script en la plantilla. No es la primera vez que lo hago. Y debe ser lo que dices, porque ahora sí que va.

Seguramente será el mismo motivo por el que otros widgets no funcionan tampoco, por el hotlink. Lo curioso es que compré al propio Google el dominio :D

Muchas gracias por la ayuda. La verdad es que no se me había ocurrido que podía ser eso :)

Responder
JMiur  

No me fijé si había otrosscripts en Google Sites pero, si los hay, ocurrirá lo mismo. Teniendo dominio propio, creo que ya no podrás usar ese servicio.

Responder
José GDF  

Tengo mis dudas ahora que sea tema del hotlink. Desde hoy ya no me sale un mensaje que se mostraba antes al pinchar en el enlace "ver blog". La transición del dominio se ha completado.

Si bien el script de este visor de imágenes lo pasé anoche entero a la plantilla y está funcionando a pleno rendimiento, tengo otro, todavía alojado en Sites, un reproductor de audio, y funciona perfectamente, incluso con audio también alojado en Sites.

Tal vez sea cosa del cambio de dominio y ya está. Eso sí, la lista de blogs la tengo que rehacer entera. Recuerdo que leí a Carlos Soler pasarle exactamente lo mismo, y tener que rehacer su blogroll, tal como me está pasando ahora a mi.

Gracias por tu ayuda ;)

Responder
Javier  

Muy bueno el post, me funciona de maravilla.

¿Sería posible que una vez ampliada la imagen se pudiera clicar sobre ella y que se abriera un enlace?
Me explico, quiero poner un mapa y que al clicar sobre él se amplie (eso lo conseguí gracias a este post), y me gustaria que se pudiera clicar sobre él en una zona creada con etiqueta AREA.

Responder
JMiur  

Supongo que sería posible pero habría que modificar varias cosas y probar.

Responder
CARLOS VAZQUEZ  

Al parecer nadie se ha dado cuenta , pues llevo todo el dia googleando y nadie lo comenta.
Me acabo de dar cuenta hoy: en Blogger ahora las imagenes por defecto, sin tu hacer nada, al hacer click se abren en un pop-up sin salir del post.
Yo normalmente lo hago con Highslide, pero con esto no tienes que hacer nada, ya viene implementado (no se desde cuando), me he dado cuenta hoy.
He revisado todo el codigo de la plantilla y de los post y no consigo averiguar que es.
Esto ocurre en todos los post, tanto nuevos como los ya publicados.
la cosa ha sido por querer pasar una imagen de uno de mis blogs a una de mis paginas (tengo un lio), justamente en esa pagina queria poner la imagen asi y ahi no quiero poner Highslide ni nada complicado, entonces esto me viene perfecto, pero nose como hacerlo.
Te lo comento por si tu le sacas el codigo, es un efecto supersencillo y perfecto para lo que yo quiero.
Ah!, cuando en el mismo post hay varias imagenes, te muestra en el bottom pequeñas miniaturas y te indica el nº de imagenes; he mirado en tu Blog y tambien lo tienes, te dejo el enlace de mi Blog, en el que estaba haciendo la revision cuando me di cuenta:
http://carlosvazquezmancera.blogspot.com/
si lo averiguas, rogaria me respondieras por mail, pues aqui no lo encontraria:
karolingio@live.com
gracias.

Responder
JMiur  

Eliminar el nuevo LightBox de Blogger

Responder
José GDF  

A mi de momento me sigue funcionando este visor de imágenes (lo llevo usando desde que lo vi aquí). Veremos hasta cuando me dejan... :S

Responder
JMiur  

Es bueno saberlo, José. Aprentemente, vamos a tener que ir verificando cosa por cosa.

Responder
pyly  

¡¡Muchas gracias!! FUNCIONA PERFECTAMENTE
Ahora tengo tarea para editar todas las publicaciones antiguas
http://pyly-elsitiodemirecreo.blogspot.com/

Responder
lalo89  

bueno aqui molestando otra vez ( y gracias buscaba exactamente esto y como hacerlo y tu me salvaste el dia)tengo un problema con esto estoy usando una tabla(ya ce es mejor usar divs)bueno en cada celda hay una imagen y quiero que cuando el cursor este sobre la imagen el cursor tome forma de un signo + de mas ya lo logre solo agregue esa funcion en el a que me da el enlace para abrir la imagen mas grande y cuando apresca la el div que tiene el #thumbBox aparezca el cursor con forma de un menos - pero no lo hace solo apare la mano y eso no quiero uso iamgenes .png por lo del fondo esto lo logro modifica cuando uso inspeccionar elemento en chrome veo todas las cosas que se generan por el codigo y demas por que aprecen div con que no cree como llos que tienen id = thumbBox o thumbImage si en esa linea de codigo meto una linea de style para cambiar el cursor lo cambia( pero como solo muestra codigo lo cambia para ese momento)mi pregunta es como cambio los cursores en cada situación para que muestre el + y - en cada situación y si incluso tengo que mover del la etiqueta a no importa necesito lograr hacer esto es algo urgen y gracias de nuevo y espero no estar molestando ;(

Responder
JMiur  

Vas a tener que mostrarme el ejemplo porque sino, es imposible entender el tema.

Responder
lalo89  

como lo muestro si lo pongo aqui me mencionaque varias partes del codigo no son validas:S

Responder
lalo89  

bueno ocupo el mismo codigo de aqui el la etiqueta a dond tengo la imagen i hace la funcion agregue esto para que cambiara el cursor
http://img38.imageshack.us/img38/4693/codigo1.jpg
en la parte del css de #thumbBox y #thumbBox #thumbImage
he agregado esto para cambiar los cursores
http://img266.imageshack.us/img266/8997/codigo2.jpg
pero solo me mantiene la mano y no los cambia

pero cuando uso chrome puedo ver el codigo pero me muestra cosas como divs que no puse en el codigo y cosas asi supongo que asi se ve el codigo si pusieras todo en lugar de usar css y js para llamarlos

http://img842.imageshack.us/img842/6956/codigo3.jpg

si pongo en los estolos del div con el id thumbImg o thumbBox el cursor con el - me los aplica
http://img528.imageshack.us/img528/61/codigo4.jpg

pero prefiero que el cambio en la apariencia del cursosr me lo aplique en el thumbBox espero que asi este mejor y para evitar estar escribiendo pongo imagens para que asi se ve mejor lo que ago

Responder
JMiur  

Cuando digo ver el ejemplo me refiero a verlo online, verlo funcionando o no funcionando. Mirar el código es un detalle posterior. Hay que verlo funcionando en el contexto en que está. Ver la página en donde está colocado.

Responder
lalo89  

bueno no lo estoy usando por momento en un servidor tal cual por cierto motivos uso uno local creo que asi se dice uso un programa llamado EasyPHP no hay forma en que te pueda mandar mi codigo para que me ayudes o como podemos resolver esto?

Responder
JMiur  

Esas cosas deben verse online porque dependen del contexto.

Responder
lalo89  

bueno encontre un ejemplo de lo mas parecido de lo que busco aqui esta esta pagina si buscas un sticker y lo seleccionas lo podras ver cuando esta la imagen se puede ver una lupa con signo de mas y al darle click te abre como otra ventana(no se como lalmarle)es como tu ejemplo pero estan casi igual por el mismo detalle cuando abre la imagen a tamaño completo quisiera que apareciera una lupa con el signo de menos

aqui esta la pagina

http://www.redbubble.com/people/furjay/t-shirts/694871-robot?p=sticker

en mi caso quiero modificar en el archivo css el thumbBox del ejemplo que aqui nos muestra para que aparesca la lupa con el menos pero no puedo solo me sigue mostrando la manita que tiene por defauld el cursor espero darte asi al idea de lo que quiero como te mostre en las iamgens del codigo logre poner el signo de mas cambiando el stilo del cursor en el enlace bueno espero tu ayuda y gracias de antemano

Responder
JMiur  

En ese ejemplo, al hacer click se abre una ventana modal. Si se quisiera poner un cursor MENOS, debería ponerse en esa ventana cosa innecesaria en ese caso porque tiene un botón para cerrarla pero, esa sería la idea.

En tu ejemplo, lo desconozco porque sin verlo, insisto, es imposible hacerse a la idea de cómo está armado.

Responder
lalo89  

si tienes razon yo uso solo el codigo de aqui tal cual lo pones solo quiero saber como poner la imagen de menos en la ventana ventana modal solo esa es la duda ya que uso tu codigo tal cual

Responder
JMiur  

En este ejemplo:

#thumbBox { cursor: .... }

Responder
lalo89  

si ya intente poner eso y trate de poner todas la opciones para cambiar los punteros como help y demas pero sin importar uqe aga solo aparece el cursosr en forma de mano :S

Responder
JMiur  

Como te dije varias veces, sin ver el ejemplo funcionando, es imposible saber cuál es el error.

Responder
kwon sang woo  

yo denuevo :X

una consulta aparte del temaa...
como puedo haacer para que en mi pagina principal del blog las entradas se muestren solo me visualiza 3 :(

JMiur  

La cantidad de páginas se establece en la Configuración del blog pero, ese número está condicionado al volumen de las páginas ya que Blogger define un máximo.

Responder
kwon sang woo  

lo tengo configurado 10 entardas solo me muestraa 3

JMiur  

No sé cuál es tu blog; probablemente, ocurra lo indicado en la segunda entrada que te indiqué, que el volumen total de la página sea superior al que admite Blogger y por eso no se muestran más.

Esto es así incluso si se utilizan determinados scripts que sólo muestran sumarios ya que muchos de ellos, generan resúmenes pero carga los posts completos aunque luego los muestran reducidos.

Responder
kwon sang woo  

http://pdulceamor.blogspot.com/

ese es mi blog :(

JMiur  

Por lo que se ve usas un script que resume las entradas pero, aún así, los posts se cargan completos así que es probable que, si la Configuración es correcta, el tamaño de las páginas sea excesivo según Blogger y el valor indicado (10) sea ignorado.

Responder
kwon sang woo  

y que podria hacer para que me muestre mas entradas :(

JMiur  

Si el problema es ese, no puede evitarse a menos que alivies la carga de las páginas, eliminando cosas.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR