Ampliar imagen al hacer click

12 de agosto de 2009 151 comentarios ,
Anteriormente vimos cómo hacer para agrandar una imagen al pasar el mouse sobre ella; en esa ocasión usamos un poco de CSS para lograr ese efecto.
Esta vez haremos algo mucho más simple, con un simple código podremos ampliar una imagen al hacer click sobre ella, y reducirla de nuevo con un doble click, como en este ejemplo:

Click para ampliar, doble click para reducir


Lo único que tienes que hacer es poner el siguiente código dentro del post donde vas a mostrar la imagen:
<img onclick="javascript:this.width=450;this.height=338" ondblclick="javascript:this.width=100;this.height=80" src="URL de la imagen" width="100"/>

  • Sólo debes cambiar la URL de la imagen (en su tamaño normal)
  • El primer width y height son las medidas a la que se va agrandar la imagen al hacer clik, width es el ancho y height es el alto.
  • El segundo width y height son las medidas a la que se va a reducir la imagen al hacer doble click.
  • El último width es el ancho de la imagen que se mostrará al cargar la página, es decir el thumbnail, se recomienda que sea el mismo ancho que tendrá la imagen al reducirse cuando se haga doble click.

Como ven, sin necesidad de tocar la plantilla pueden usar este truco para mostrar una galería de fotos, o simplemente para reducir el espacio en el blog.


151 comentarios en:

" Ampliar imagen al hacer click "

  1. Interesante truco. Tengo varios blogs de ayuda a blogger y suelo hacer las entradas con muchisimas imágenes, explicando paso a paso lo que van a encontrar, lo que las convierte en kilométricas, pues pongo las imágenes a tamaño natural. Supongo que no siempre serán necesarias todas, pero ante la duda las incluyo.
    Con este truquillo podría dejar las entradas mucho menos extensas pero con todas sus imágenes.
    Solo una pregunta: Veo que el código pone script:this ¿se ha de tener algún script especial incluido en la plantilla o los que suele haber por defecto ya sirven?
    En estos temas de los scripts estoy muy pez todavía.
    Gracias.

    ResponderEliminar
  2. Vaya, queria marcar seguir este hilo de comentarios, por si me respondes, y se me ha olvidado. sorry.

    ResponderEliminar
  3. Hola Eulalia,

    Es excelente el trabajo que haces en tus blogs, ya te he agregado a los Blogs de Ayuda.

    Tienes razón en lo que mencionas de las imágenes, algunas veces se vuelven muy largos los posts debido a tantas imágenes que se tienen que mostrar, y hay quienes incluso omiten ciertas imágenes con tal de que no ocupen tanto espacio en el blog.
    Por suerte con este truquillo eso se arregla, y lo mejor de todo es que no se necesita agregar ningún script especial, el atributo script:this sólo llama a una función java del navegador, así que no hay que preocuparse por agregar nada más.

    Gracias por tu visita y muchos éxitos con tus blogs!

    ResponderEliminar
  4. hola ciudad blogger soy ivan! te acuerdas que por chat te avia preguntado comoc rear un menu con botones con imagenes, tu me habias dado un codigo html me lo puedes mandar por e-mail muchas gracias!

    ResponderEliminar
  5. Te lo acabo de mandar Ivan.
    Saludos.

    ResponderEliminar
    Respuestas
    1. El potro me pudieras enviar el codigo para hacer menus con imagenes??

      Eliminar
    2. No tengo alguno exclusivo de imágenes, pero puedes tomar cualquier menú y sustituir los textos por el código de las imágenes.

      Eliminar
  6. Muchas gracias por tu rápida respuesta. Siendo así no dudes que lo implantaré en alguna entrada.
    Y gracias por el link pero ¿te importaría, si no es pedir demasiado, cambiarlo por el de mi blog principal? Aunque desde el que has enlazado cualquiera puede acceder a los demás, Tuneando el blog es el más conocido. No lo habrás visto porqué lo tengo en otra cuenta. En ésta desde la que te escribo tan solo tengo blogs de muestra que apenas actualizo.
    En la otra es donde están todos los que voy actualizando.
    Gracias.
    ¡Ah! también el tuyo va a formar parte de mi colección de blogs de ayuda, por supuesto.
    Saludos.

    ResponderEliminar
  7. No hay problema, ya lo he cambiado. Muchas gracias por el link.
    Estoy a tus órdenes para lo que se te ofrezca.
    Saludos.

    ResponderEliminar
  8. Gracias de nuevo. Y lo mismo digo, si en algo puedo serte útil mis blogs y yo estamos a tu disposición.
    Saludos.

    ResponderEliminar
  9. potro la verdad que me gusto mucho este post ...me a ayudado mucho.Gracias!!:D

    ResponderEliminar
  10. Eulalia, gracias!!! =)

    HP muggle, qué bueno que te ha servido.
    Saludos.

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por un administrador del blog.

      Eliminar
    2. Supongo que tendrías que quitarle ese Leer más y poner otro:
      http://ciudadblogger.com/2011/07/quitar-el-leer-mas-automatico-en-las.html
      http://ciudadblogger.com/2011/01/leer-mas-con-imagenes-en-miniatura.html

      Eliminar
  11. Me va a ayudar bastante, por que yo soy de las que ponen tropecientas fotos en cada entrada. (tiene que ser así para principiant@s en la cocina)

    Gracias.

    ResponderEliminar
  12. Hola Meri,

    Creo que a todos los blogs que se dedican a la enseñanza les será de mucha utilidad. Cuando se trata de aprender entre más fotos, mejor.

    Saludos y gracias por tu visita.

    ResponderEliminar
  13. No me funciona.
    Lo pongo en el HTML de la entrada y blogger me modifica el código con lo que no logro que funcione.
    Me cambia el orden del onclick y el ondblclick y las medidas de la minatura desaparecen.

    ¿Hay solución?
    Un abrazo.

    ResponderEliminar
  14. Hola Eulalia,

    Aun cuando cambie el orden del código debería funcionar, lo extraño es que desaparezcan las medidas de las miniaturas, yo lo he probado en tres blogs de prueba (por aquello de los scripts) y en todos funcionó.
    Podrías intentar hacerlo desde otro navegador o en Blogger in Draft, quizá ahí tengas mejor resultado.

    Saludos.

    ResponderEliminar
  15. Uy acabo de publicar, mañana utilizare ese truco.
    Y por fin logre que apareciera el codigo para que califiquen mis post.
    De nuevo gracias.

    Saludos.

    ResponderEliminar
  16. Hola el venado,

    Ya vi que aparece el ranking para los posts, qué bueno que lo has arreglado.
    Saludos.

    ResponderEliminar
  17. hey esta perfecto este truco ya lo implemente y funciona de maravilla
    mil gracias y saludos!

    ResponderEliminar
  18. Hola +++,
    Me alegra que te haya sido útil.
    Saludos.

    ResponderEliminar
  19. Me da este error al publicar

    No me lo admite ponertelo aqui

    ResponderEliminar
  20. Hola Meri,

    Entra a esta página:
    http://www.blogcrowds.com/resources/parse_html.php y pega ahí el código de error que te marca, luego presiona el botón Parse, verás que "convirtió" el código que pegaste, ese código convertido puedes ponerlo aquí en el comentario para saber qué error tiene.

    Saludos.

    ResponderEliminar
  21. A verrrrrrrrrr


    Su HTML no es aceptable: Tags cannot enclose tags img onclick="javascript:this.<span class=" style="color: rgb(255, 0, 0);"

    ResponderEliminar
  22. hola!!!! te queria preguntas... bueno el asunto es asi. yo estoy ceando un blog de blogger con este... y veo que cuando vos pones los cpdigod por ejemplo en este post sale con ese fondo y yo cuando lo pongo sin fondo me marca el url y yo no quiero que pase eso me das una ayuda!!!!!

    ResponderEliminar
  23. Hola Meri,

    Eso es porque al pegar el código en tu post, también toma el código de color (rojo) que yo tengo para resaltar algunos datos.
    Para solucionarlo, cuando vayas a pegar el código en tu post, cerciórate que estés en la ficha Edición de HTML en lugar de la ficha Redactar, estas opciones están en la esquina superior derecha de donde se escribe el post.
    Verás que cuando lo pegues ahí ya no tendrás problemas.

    Saludos.

    ResponderEliminar
  24. Hola Ivan,

    Eso no tiene que ver con el fondo, lo que necesitas es "parsear" el código para que Blogger lo tome como texto plano, para saber cómo hacerlo visita este post:
    http://ciudadblogger.com/2009/01/insertar-cdigo-html-en-un-post.html

    Saludos.

    ResponderEliminar
  25. Mil gracias era justo lo que queria !

    ResponderEliminar
  26. Hola Lutien,

    Me alegro que te haya servido.

    Saludos.

    ResponderEliminar
  27. Hola amigo una pregunta no sabes como modifiacar para que le de 1 clik para abrir y un clik para cerrar

    ResponderEliminar
  28. Hola O.J.C.S

    Lamentablemente no puedes darle dos instrucciones distintas con el mismo comando, en este caso un sólo click ya tiene una instrucción, si le das una segunda instrucción ya no hará nada, es por eso que se usa otro comando (doble click) para poder realizar ambas instrucciones.

    Saludos.

    ResponderEliminar
    Respuestas
    1. hola potro,
      me gustaria seber mi podrias ayudar, ¿sabes como puedo hacer que cuando haga clik en la foto de la portada de mi web se agrandey doble clik se quite?
      la pagina la hice en joomla y no se donde meter el codigo para que me salga graciass..

      Eliminar
    2. Usa el mismo método de esta entrada, ayer no estaba funcionando por los estilos que cambié en mi plantilla, pero ya lo he modificado y el ejemplo está de nuevo funcionando.
      Saludos.

      Eliminar
  29. Tienes una web estupenda,magnífica.

    Este efecto es la caña para lo que yo quiero hacer,pero no sé exactamente donde debo colocar el código.

    Se agradece todo el curro que llevas a cabo...

    QUE HAY QUE AGRADECER MUCHO MÁS (Es de ser bien nacido ser agradecido)

    ResponderEliminar
  30. Hola JantonioSR,

    Gracias a ti por tu visita. El código lo debes poner dentro de donde escribes tus entradas, o si lo quieres en la barra lateral entonces entra a Diseño > Elementos de la página > Añadir gadget > HTML/Javascript y ahí lo pegas.

    Saludos!

    ResponderEliminar
  31. Hola.Siento poner aquí mi consulta,a no tener nada que ver con el post,pero no sabía dónde ponerla.
    Me baje de una página de templates una plantilla para uno de mis blogs.Me gustaría que la fecha del post salga un poco más grande,y el título más pequeño,pero con esta plantilla HTML no me aclaro.....
    Dejo la dirección del blog por si puedes echar una mirada a la plantilla y decir dónde tengo que hacer las modificaciones.
    http://www.sagitaire17.com/
    Un saludo.

    ResponderEliminar
  32. Hola sagitaire17,

    En esta parte de la plantilla modifica el tamaño de la fecha:
    h2.date-header {
    letter-spacing:0px;
    font-weight: bold;
    color: #4c4c4c;
    size:10pt;
    font-family:georgia;
    margin:5.5em 0 20px 400px;
    text-decoration:none;
    }

    Y en esta parte modificas la fuente de los títulos:

    .post h3 {
    margin:.25em 0 0;
    padding:0 0 4px;
    letter-spacing: -3px;
    font-size:27pt;
    font-weight:normal;
    line-height:1.4em;
    color:#484848;
    }

    Saludos.

    ResponderEliminar
  33. Hola.Otra vez yo.
    No se que pasa,pero desde que hice unos cambios en la plantilla HTML de esta página,tarda muchisimo tiempo en cargarse.No se si he tocado algo que no debía,si es por un fallo de la plantilla....¿Podrías darme un consejo para remediar eso?
    La dirección es
    http://sagitaire17.com/
    P.D. Tengo otra página con una barbaridad de widget,y se carga enseguida.Y con sagitaire17 que esta casi vacía es una agonía....

    ResponderEliminar
  34. ¿Qué modificaciones hiciste en la plantilla?

    ResponderEliminar
  35. Antes que todo perdón por si no resulta muy claro lo que sigue,pero es no estoy muy familiarizado con la "jerga informática".
    Hice varios,pero empece a tener problemas con la carga de la página después de modificar las dimensiones de la fecha y del título.Baje también un poco el título del blog (bueno,que la página no empece tan pegada al borde superior de la pantalla).He bajado también la palabra "Blog" que sale en la cabecera,y he modificado también el espacio entre la fecha y el título del post.
    Con otro blog hice cambios de este tipo,pero nunca tuve luego problemas después con la carga de la página.Por eso me pregunto si podría tener que ver con la plantilla en si misma o con el sitio de dónde la descargue.

    ResponderEliminar
  36. P.D. me fastidia un poco si al final tengo que cambiar de plantilla.Me gusta bastante,y encima con toda la faena que me ha dado modificarla para que sea más a mi gusto...

    ResponderEliminar
  37. Ahorra no se si vale la pena haberte molestado:la página ha vuelto a cargarse normalmente.No se si habrá sido un problema con la dirección dónde esta el fondo de la plantilla (este que viene con el código de la plantilla).Todas mis disculpas.
    Un saludo.

    ResponderEliminar
  38. Hola sagitaire17,

    No es ninguna molestia.
    Efectivamente el blog carga normal, he revisado tus códigos y todo lo veo en orden, nada que pueda alentarla.
    Sucede que a veces Blogger se alenta un poco en su servidor y esto hace que el tiempo de respuesta de la página tarde un poco, pero como has visto sólo es cuestión de esperar a que las cosas se normalicen.

    Saludos.

    ResponderEliminar
  39. Muy buen blog Potro
    Quisiera preguntarte como ampliar la imagen para que se vea por encima de todo el blog no solo sobre las entradas, y que al estar ampliadas se vean con fondo negro.
    espero tu respuesta.

    ResponderEliminar
  40. Gracias por la respuesta Potro.

    Ahora quisiera que respondas las siguientes preguntas por favor.
    ¿como centrar el titulo de los gadgets?
    ¿como centrar el titulo de las entradas?
    ¿como cambiar el color a las letras del titulo de las entradas?

    espero tu respuesta.
    saludos!!!

    ResponderEliminar
  41. Para centrar los títulos tienes que agregar esto:
    text-align: center;

    ¿Dónde? Pues si es para centrar el título de los gadgets va debajo de:
    h2 {

    Si es para centrar las entradas va debajo de:
    .post h3 {

    Y para cambiar el color de los títulos de las entradas busca algo como esto:
    .post h3 a, .post h3 a:visited, .post h3 strong {

    Y debajo verás que dice color: más un código.
    Cambia ese código por el código del color que quieres.

    ResponderEliminar
  42. Gracias Potro por la respuesta.
    Ahora quisiera saber como hago para que se cean y escribir comentarios de Facebook directamente en mi blog.

    ResponderEliminar
  43. Lo desconozco. Me parece que en Vagabundia tienen algunas explicaciones sobre los plugins de Facebook.

    ResponderEliminar
  44. Gracias Potro, agradesco tus respuestas.

    ResponderEliminar
  45. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  46. No, pero nuevamente en Vagabundia puedes ver algo parecido:
    http://vagabundia.blogspot.com/2009/10/incrustar-multiples-videos-de-youtube.html

    ResponderEliminar
  47. Gracias Potro.
    Ya comprendi respecto a la ultima pregunta que te hize.
    Ahora quisiera saber si hay alguna forma de que la pagina principal se vea diferente, es decir sin algunos gadgets, etc, pero cuando entre a cualquier post todo se vea normal.

    ResponderEliminar
  48. Potro, como cambiar el color de fondo a solo un sidebar, no a todos solo a uno.

    ResponderEliminar
  49. ¿Sidebar o gadget? Si es a una sidebar sería cuestión de que busques su contenedor y debajo le agregues el color de fondo, por ejemplo:

    #sidebar1 {
    background: #ccc;
    }

    Si es a un gadget es igual, localiza el nombre del ID del gadget y ponlo en los estilos, por ejemplo:

    #HTML1 {
    background: #ccc;
    }

    ResponderEliminar
  50. Hola Potro, un saludo, no se si este sea el sitio, pero en verdad no lo consigo por ningun lado, mi pregunta es esta, quiero reducir el espacio que queda entre la pestaña de menu que coloque y el inicio de las entradas,alli me queda un espacio como de 1 cm, no se si me explico, pero alli queda un vacio que no me gusta para nada, ademas de eso me gustaria que al quitar la navbar tambien se redujera el espacio vacio que queda alli, ya habia quitado esa barra, pero me quedo extraño y no me gusto, dime como hago por favor, te dejo la direccion de mi blog que estoy empezando a hacer: http://www.tutrabajodegrado.blogspot.com

    ResponderEliminar
  51. Hola Ysa,

    Para eliminar el espacio entre el menú y las entradas busca en tu plantilla esta parte:

    .main-inner {
    padding-top: $(date.space);
    }

    Y cambiala por esta:
    .main-inner {
    padding-top: 0;
    }

    Para eliminar la navbar mira esta entrada.

    Saludos.

    ResponderEliminar
  52. Bueas, yo tengo un blog en Blogger y me gustaria saber, si fuese posible como disminuir la imagenes con un solo clic, en vez de con dos como el truco este solo con un clic, es decir, clicar sobre la imagen para ampliar y en vez de hacer 2 clics para disminuirla, hacer solamente un clic.

    Gracias

    ResponderEliminar
  53. Hola Risto Shim, un mismo elemento no puede tener dos funciones con el mismo comando, al menos no cuando se usan estos métodos.
    Saludos.

    ResponderEliminar
  54. Hola El Potro gracias, yo es que he visto blogs que tienen eso de que cuando clicas una imagen esta se amplia y si la clicas de nuevo esta disminuye.

    No sé debe ser que ese comando sólo está disponible en la plataforma Wordpress, así que de momento y mientras tenga el blog en Blogger le añadiré el comando que pusiste antes.

    Saludos ☻ :)

    ResponderEliminar
  55. Si lo viste en Wordpress entonces debe ser algún plugin que tiene esas características. Habría que averiguar cuál plugin es para saber si es posible añadir algo similar en Blogger basándonos en el original.

    Saludos!

    ResponderEliminar
  56. Lo he insertado en una página HTML, (en exeLearning), y me funciona estupendamente. Me gustaría ahora que la imagen viniera con una leyenda que diga "Clic para ampliar y dobleclic para estado inicial". ¿Qué debo añadir al código para anexar la leyenda debajo de la imagen? Gracias,.

    Por cierto, buen blog!

    ResponderEliminar
  57. Sólo agrega debajo del código de la imagen el texto que deseas:

    <span>Click en la imagen para agrandar</span>

    ResponderEliminar
  58. hola, tengo una duda si quiero subir varias imagenes y que cada una se amplie???

    o esta solucion fue la que encontre mas adecuada a mi problema el cual es el siguiente QUIERO QUE NO SE PUEDAN COPIAR LAS IMAGENES DE MI BLOG,

    ya desavilite el GUARDAR IMAGEN COMO.

    pero si le dan click a la imagen se abre otra ventana y ahi si se puede hacer el GUARDAR IMAGEN COMO.

    asi que si me pudieran ayudar a encotrar una solucion.

    GRACIAS

    ResponderEliminar
  59. Hola ,

    Hay métodos para proteger las imágenes incluso el texto del blog aunque no existe un método seguro al 100%.
    Este es uno que evitará que se arrastre la imagen y que se guarde con el botón derecho del mouse.

    Para eliminar el enlace de las imágenes mira esta entrada.

    ResponderEliminar
  60. Buenas, en primer lugar enhorabuena por la labor que haces para gente con poca idea como yo. El código que pones para agrandar la imagen al hacer click, está genial, mí problema es que mí plantilla es de tres columnas y al hacer click si he puesto un tamaño de imagen mayor que el de la columna principal se me solapa y queda por debajo de las dos columnas de la derecha. ¿Sabrías decirme cómo puedo hacer para que no quede por debajo y la imagen salga por encima de todo? Gracias. Un saludo!

    ResponderEliminar
  61. Hola Alberto Vil,

    Prueba poner después de src="URL de la imagen" esto (dejando un espacio)
    style="z-index:2000;"

    Saludos.

    ResponderEliminar
  62. He puesto eso pero no funciona. Gracias. Se te ocurre algo?es que no sé que hacer ya!

    ResponderEliminar
  63. Entonces cámbialo por esto:
    style="position:absolute;"

    ResponderEliminar
  64. Ey, genial muchas gracias. Aunque ahora me surgen otros problemas. Como te diría:1.una vez que se agranda no puedo volver a hacerla pequeña? es que pienso que para los usuarios del blog sino será un rollo, porque les tapa la información. 2.al ponerlo como me has dicho, cuando la imagen es pequeña no la deteca bien la entrada y es como si la entrada finalizara antes de salir la imagen, y esta sale fuera del limite de la entrada.

    Disculpa cualquier molestia y mil gracias por tu ayuda!

    ResponderEliminar
  65. lo segundo lo arreglé poniendo position:relative.... no sé que quiere decir pero lo probé a ojo!!! lo de volver a hacerlo pequeño ni idea!

    ResponderEliminar
  66. Hola de nuevo Alberto,

    Como se menciona al inicio de la entrada, se reduce al hacer doble click.

    ResponderEliminar
  67. Hola Potro!!! Yo nuevamente por aca! jejeje
    Bueno te cuento :)
    Creo que mi pregunta tiene que ver un poco con este tema, y es lo siguiente.
    Estoy por aprender hacer fondos para mi blog de blogger. Fondos para utilizar con la plantilla minima. Ya aprendi hacerlos con un tutorial en video que encontre. la resolucion de mi pantalla es de 1366 x 768 Yo hice los fondos a una resolucion de 1366 x 900. Cuando los instalo el blog quedan estos cortados de ancho, como si quedaran pequenos a su anchura. Crees saber a que se debera esto? Acaso los debo hacer mas grandes? ( cabe decir que los fondos de ensueno (esto es una pagina de fondos) me quedan bien, y ella los hace en 1440 x 900. Estos fondos quedan bien en mi blog, se me ocurrio agrandar uno de mis fondos a esas medidas para probar, y cuando lo hice... lo mismo!!! quedaron pequenos!!!! Porrrrrrr Favorrrrrrrrrrrrrrr Ayudameeeeeeeeeeee Como se hace esto? como puedo lograr que encajen al blog? Gracias Perdoname por el tema pues este es mas un tema de mujer pero creo que sabes mucho y me puedes ayudar!!! Gracias (bellarubby@yahoo.com)

    ResponderEliminar
  68. Hola Hija del Altisimo,

    Quizá lo que puede estar pasando es que no estás usando la imagen en tamaño real.
    Verifica si estás usando está medida máxima de 1600px, si no se arregla dime en cuál blog tienes el problema.

    ¡Saludos!

    ResponderEliminar
  69. Saludos Camarada:
    Por aquí de nuevo [el sediento, siempre busca la fuente] ¿Qué le digo? Empecemos, está espectacular el post, precisamente estoy tratando de reorganizar el Blog y andaba en eso, buscando el Código, como tengo un enlace a este blog, entré aqui y me conseguí este código tan sencillo. Corro y lo aplico, despues paso por aquí y le echo el cuento, como me fue.
    Agradecido.-
    COOPERATIVAS

    ResponderEliminar
  70. Estoy seguro que todo saldrá bien Omar, y sino pues por aquí estamos ;)
    Saludos.

    ResponderEliminar
  71. GENIAL ESTA APORTACION! JUSTO ESTABA BUSCANDO ESTO PARA UN APARTADO DE MI WEB Y HA QUEDADO PERFECTO! MUCHAS GRACIAS

    ResponderEliminar
  72. Qué bueno que te ha gustado gamesandonline, saludos!

    ResponderEliminar
  73. Por supuesto, sólo agrega el código en un elemento HTML/Javascript y listo :)

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

    ResponderEliminar
  75. SALUDOS AMIGOS EL EJEMPLO DE AMPLIAR LA IMAGEN AL HACER CLICK
    ESTA MUY BUENA PERO EL TEXTO SE MUEVE MAS ABAJO DEPENDIENDO EL TAMAÑO DE LA IMAGEN GRANDE Y ESO TE QUITA PROFESIONALISMO UN POCO.

    ESTOY BUSCANDO ESTE TIPO DE EFECTO QUE SE AMPLIE LA IMAGEN PERO QUE QUEDE COMO CENTRADA EN LA MISMA PAGINA HECHEN UN VISTAZO A ESTA WEB...http://www.peruautos.com/venta-de-camioneta-suzuki-del-2003-7209

    ResponderEliminar
  76. Esa es una ventana modal, puedes hacer una con Shadowbox.
    Saludos.

    ResponderEliminar
  77. Buenas tengo un problema, yo pretendo que de una foto pequeña al darle click se agrande, os pongo lo que tengo puesto.
    esta frase la tengo en spam aqui no deja asike la pongo asi no pongo cierres ni averturas de estas <> por que no me deja si no poneros el mensaje
    Pulsa en la imagen para verla en grande.

    table class="fototable"

    tr
    td
    a href="URL DE LA IMAGEN QUE TENGO" rel="lightbox[ds1]
    " title="CONSERVAS"><img alt="" src="URL DE LA IMAGEN QUE TENGO"
    width="190px" border="1"

    </a
    td
    td
    td
    tr
    table

    Mi problema es que si la imagen esta perfecta en pequeño y cuando se agranda, pero no puedo cerrarla , tengo que volver a entrar al menu nuevamente y dirigirme de nuevo a la pagina donde me encontraba que es donde tengo todos los productos de la web.,y es algo incomodo para el cliente.
    Lo que me gustaria si me pudieran ayudar es si tienen algun codigo que pueda poner en mi pagina y cuando se agrande la imagen dentro de mi pagina sin abrirse en otra pagina salga la X de cerrar y retorne al cliente a la pagina donde estaba anteriormente, es decir donde los productos.
    os pongo una web de ejemplo aunque no tiene que ser asi pero esto ya seria estupendo la verdad.

    www.desguacesanchez.com

    si entran hay veran que salen las imagenes digamos pequeñas pero al darle encima de una se abre como un cuadro con la imagen donde si aparece la X para cerrar dicha imagen y regresar a la pantalla anterior donde esta el resto de imagenes o la descripcion.
    tampoco me importaria si la imagen en pequeño pongo ejemplo: lata alcachofa 250g y al agrandar la imagen poder meter una descripcion algo mas amplia del producto pero que no salga cuando esta la imagen pequeña, como en la web que os pongo anterior mente www.desguacesanchez.com que al abrirse la imagen aparece una descripcion del producto.

    muchas gracias de antemano ya que no entiendo mucho y me seria de mucha alluda poder incorporar ese sistema en mi web si me lo pueden detallar un poco la explicacion y pasos a seguir se agradece, como digo no soy muy esperimentado , pero si me facilitan el codigo y me dicen que devo cambiar o poner mi URL DE IMAGEN eso si sabre hacerlo sin problemas. como digo muchas gracias de antemano.
    mi correo es manu_clio7@hotmail.com gracias

    ResponderEliminar
    Respuestas
    1. Hola 000000xr3,
      Tanto el ejemplo que pones como la referencia del sitio web usan Lightbox, ese es un buen método, pero suele dar problemas de estilos en algunas páginas.
      A modo personal te recomendaría usar mejor Shadowbox, hace lo mismo, pero presenta menos problemas y además también permite mostrar otros elementos multimedia en la ventana modal tales como videos.

      Ya sea cualquiera de los dos que te decidas, si llegas a tener problemas con alguno de ellos deja la pregunta en alguna de esas entradas junto con la dirección de la página donde lo has puesto para ver qué puede estar pasando.

      Saludos.

      Eliminar
  78. Buenas de nuevo, y para usar Shadowbox como me comentas o algo que me preste la herramienta que necesito?
    como tengo que hacer?
    yo con que la foto se abriera en un marco que contenga la X de cerrar y poder añadirle un mini texto me conformo, hay algo con lo que poder hacer esto que me puedan facilitar? gracias.

    ResponderEliminar
    Respuestas
    1. Mira los enlaces que te puse en el comentario, ahí está toda la información que necesitas.
      Saludos.

      Eliminar
  79. Buenas me gustas mucho tu blog ya que resuelves muchos temas interesantes, yo tengo un problema al copiar el codigo para hacer doble click se amplia la imagen pero al hacer click la imagen se deforma y se que da en grande y no a su tamaño original, de hecho me descuadra todo el blog, porque se descolocan las fotos, he intentado poner lo de las medidas que explican pero no hay manera.
    Si me ayudaras gracias

    ResponderEliminar
    Respuestas
    1. Hola cintia, gracias por tu comentario. Supongo que el problema es porque no estás poniendo las medidas adecuadas de la imagen en su tamaño grande, pero habría que ver en cuál blog lo has puesto para ver el código que tienes.

      Eliminar
    2. buenas, es muy interesante este truco, sin embargo, no hay manera de aplicárselo a un video? o no cionoces alguna manera de cuando de click a un video el se agrande?

      Gracias

      Eliminar
    3. No Alex, eso ya depende de las funciones que tenga el reproductor.

      Eliminar
  80. Qué tal! Tengo un problema, yo quisiera que ésto sucediera de manera predeterminada. En realidad no quiero que puedan copiar mis imágenes, pero éstas se abren en ventanas apartes, entonces me gustaría poder evitar esto o que se abran directamente dentro del mismo blogger impidiendo que las copien ya que desactive el clic derecho.
    Leí las otras entradas pero en todas explicas como hacerlo pero con una sola imagen no con todas.. y el de desactivar el clic izquierdo me funciono pero no con las fotos! Desde ya muchas gracias.. tu blog es de gran ayuda para mí.

    ResponderEliminar
    Respuestas
    1. Hola Julieta, quizá pueda interesarte este método para ampliar las imágenes al pasar el cursor:
      http://ciudadblogger.com/2012/04/aumentar-imagenes-al-pasar-el-cursor.html

      Eliminar
  81. Como realizo esa misma opción pero en código jsp?

    ResponderEliminar
  82. hola...me gusta mucho tu blog! pero mi problema es soy un poco nuevo y no se donde tengo que poner el codico..seria fantastico para mi hacer tu truco en mi pagina!! muchas gracia por tu tiempo

    Saludos

    ResponderEliminar
  83. hola..me gusta mucho tu blog! pero el problema es que soy un poco nuevo y ni se donde tengo que pone exactamente el codico..seria fantastico para mi hacer tu truco en mi pagina...!!

    Muchas gracia por tu tiempo..saludosssss

    ResponderEliminar
    Respuestas
    1. Hola, el código debes ponerlo en una entrada, sólo debes hacerlo estando en la pestaña HTML y no en la de Redactar.
      Saludos.

      Eliminar
  84. Hola Potro, ultimamente estoy teniendo problemas cuando subo en mis esntradas imagenes gif desde mi ordenador, se ven mal, sin embargo he probado a subirlas desde 4shared y asi se ven bien, pero cuando le das a la imagen para verla más grande los lleva hasta mi pagina de 4shared, cuando antes al subirlas desde mi ordenador al hacer click sobre la imagen se agrandaba. ¿Sabes a que se debe esto y como lo puedo solucionar?
    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Emilieta, si prefieres seguir subiendo esas imágenes a otro alojamiento puedes quitarle el enlace a la imagen para que no envíe a ningún lado al hacer click. El código de la imagen SIN el enlace deberá quedar así:

      <img src="URL de la imagen" />

      Eliminar
  85. Hy un problema con este sistema, si pones dos imágenes una al lado de la otra, al hacer click se solapan.... hay alguna posibilidad de que esto no ocurra? no se si me he explicado bien

    ResponderEliminar
    Respuestas
    1. Siempre que se usan este tipo de métodos sucede eso, en realidad estos "efectos" no están pensados para imágenes alineadas :/

      Eliminar
  86. Buen dia, queria saber si es posible ponerle un boton de esta forma:

    http://www.comunidadptc.com/t22282-primer-pago-gift-hunter-club-5

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

    ResponderEliminar
  88. Un truco interesante, pero tengo un problema:

    Coloco una imagen que ocupa todo el espacio de ancho de las entradas (640px), pero quiero que al darle click se expanda hasta los 940px de ancho. Efectivamente, lo consigo, pero los gadgets de la barra lateral derecha quedan por encima de la imagen. ¿Alguna forma de solucionar esto?

    Aquí te enlazo una imagen explicando el problema de manera gráfica.

    Te agradezco enormemente una respuesta

    ResponderEliminar
    Respuestas
    1. Añade estos estilos:
      .column-center-outer {
      z-index: 2;
      }

      Eliminar
    2. ¡Sí! ¡Por fin! ¡Mil gracias!

      En serio, muchas gracias por tu ayuda.

      Eliminar
  89. Que tal amigo muy buenos dias una pregunta y si en mi caso quiero que al dar click en la imagen se agrande y a su vez me mueste algo asi como detalles de la imagen, como le podria hacer esa parte de mostrar detalles al dar click amigo?, de ante mano muchas gracias por el tuto, la verdad es muy bueno!!!.

    ResponderEliminar
  90. Que tal amigos muy buenos dias, mi duda es que como podria hacerle yo si lo que necesito es al dar click en la imagen se agrande pero a su vez me muestre algo asi como detalles de la imagen, de ante mano muchas gracias por ese gran tuto me sirvio de mucho.

    ResponderEliminar
    Respuestas
    1. No sé decirte Carlos, con este no se puede, supongo que necesitarías CSS más avanzado para poder conseguirlo.

      Eliminar
  91. Hola que tal mira testeando una plantilla de blogger me percaté que en los posts expande demasiado las imagenes que posteo en las entradas, estaba checando el codigo html pero no logro encontrar la orden para solucionarlo y las imagenes se posteen normalmente

    ResponderEliminar
    Respuestas
    1. Hola Oxakin, quizás sea que cuando subes las imágenes eliges el tamaño real y no otro tamaño más pequeño. Cuando subas las imágenes, verás que en la misma ventana te da la opción de elegir el tipo de tamaño con el que quieres que se muestre la imagen en la entrada, salvo que los estilos de la plantilla digan que deban tener una medida específica.

      Eliminar
  92. Hola, soy nuevo en esto y no entiendo mucho de javascript, la verdad que el efecto de la foto es el que andaba buscando pero me gustaria que al acer click en la imagen ademas de agrandarla se mostraria cierta informacion de una bbdd y al hacer doble click que se hiciera chikita la imagen y se escondiera la info.
    ¿Como podria hacerlo?
    Graxx de antemano

    ResponderEliminar
  93. Hola, la verdad que esta muy bien el efecto de ampliar y reducir la imagen mediante javascrip. Yo soy nuevo en esto y no tengo mucha idea pero me gustaria saber como poder hacer lo siguiente:
    Una vez que se hace click en la imagen que se muestre cierta informacion que tengo en una consulta de BBDD y al hacer doble click que se esconderia la info.
    ¿Alguien sabe como hacer esto?
    Un saludo y graxx de antemanoo!

    ResponderEliminar
    Respuestas
    1. Lo siento Eduardo, ignoro cómo podría hacerse, pero si deseas "jalar" los datos desde una BBDD supongo que se necesitará algo mucho más complejo que esto.

      Eliminar
  94. y como hago para poner una imagen en Excel y darle click para que se agrande

    ResponderEliminar
  95. y como hago para poner una imagen en excel y que agrande al darle click

    ResponderEliminar
    Respuestas
    1. Hola Jorge, todo lo que hay aquí es para Blogger, y aunque muchas cosas se pueden aplicar a otras plataformas sólo ha sido probado en Blogger.

      Eliminar
  96. me parece excelente tu blog quisiera consultarte si sabes como hacer efectos de imagenes dentro de un gridview en asp con c#

    ResponderEliminar
  97. me parece excelente tu blog y quisiera realizarte una consulta es posible tener esos efectos en gridview que consulta a una bd en asp.net con c#

    ResponderEliminar
    Respuestas
    1. Lo ignoro hormiga, sólo he trabajado bajo la plataforma de Blogger.

      Eliminar
  98. Hola Amigo, antes de nada felicitarte por tu blog. Hace unos días que he cambiado mi portátil, ahora trabajo con el Window 8, y al descargar las fotos a mi blog, al pincharlas, no me sale en la parte superior, la barrita que me permitía, ampliar o reducir el tamaño, mover a derecha e izquierda y editar. ¿Sabes que puede pasar?, te agradecería tu colaboración, un abrazo y muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola IVAN, no mencionas con cuál navegador lo estás haciendo pero, ¿has probado con otro navegador? tal vez en el navegador esté el problema.

      Eliminar
  99. hola, que tal, mi duda es lo opuesto, yo tengo una platilla sencilla y cuando le doy clic a una imagen la amplia y me aparece una galeria de todas las fotos del post. No quiero que eso pase. No quiero que pase nada al darle clic a una imagen. ¿Alguien tiene una idea de como hacerle?

    Saludos.

    ResponderEliminar
    Respuestas
    1. Hola, entra en Configuración > Entradas y comentarios, y donde dice Mostrar imágenes con Lightbox selecciona No.

      Eliminar
  100. Buenas Potro, esto de configurar el blog crea addicion!! je je je.
    Tengo una consulta, es posible agrandar la imagen y dejar el fondo de la entrada un poco oscura para que resalte mas la imagen que hemos ampliado y no se confunda con el fondo.
    Tengo dudas si es mejor abrir las imágenes en una nueva pestaña como dices en un post tuyo o intentar esta solución para que sea mas rápido consultar la información.
    Un saludo y mil gracias por tu ayuda
    Atentamente ACP

    ResponderEliminar
    Respuestas
    1. Jeje, lo sé :)
      Supongo que lo que mencionas es como el Lightbox, de hecho Blogger (en plantillas originales) ya trae incluido su propio Lightbox, aunque también puedes incorporar uno más completo como Shadowbox. Saludos.

      Eliminar
  101. ¡Hola, Potro, cómo estás! Nuevamente yo por aquí, buscando tu ayuda.
    ¿Qué debería modificar en mi plantilla para que no se puedan abrir las imágenes? Eso hace esta plantilla, por ejemplo: http://btemplates.com/2011/blogger-template-horebe/demo/
    Un saludo, éxitos en 2015, y muchas gracias por tu ayuda.

    ResponderEliminar
    Respuestas
    1. Jajaj, recién noto que tu blog tiene las imágenes de ese modo. Cambio mi pregunta entonces: ¿cómo hago para que las imágenes no puedan abrirse con click izquierdo, como en este blog? :)

      Eliminar
    2. ¡Muchas gracias, Potro!
      Yo me refería a si se podía modificar la plantilla para que el cambio se hiciera automáticamente en todas las entradas viejas (la plantilla que te mostraba más arriba —horebe— lo hace automáticamente). Pero revisé el post al que me remitiste y en los comentarios vi que decías que, si hay alguna manera de hacerlo, la desconoces. Así que tendré que arremangarme e ir eliminando manualmente cada enlace. :)
      ¡Saludos!

      Eliminar
    3. No es que esa plantilla lo haga automáticamente, en realidad en su HTML no se ve ningún enlace en la imagen lo que significa que nunca añadieron el enlace en la imagen o lo eliminaron antes de publicarlo.
      Saludos.

      Eliminar
  102. Hola, muy buenas! Necesito un poco de ayuda. Quiero que al pinchar en la miniatura de mi imagen entre en la entrada, al igual que hace el div de leer más. He intentado poner un onclick pero no se donde lo tengo que poner ni el código exacto. Si me puedes ayudar. Un saludo y gracias por tu trabajo.

    ResponderEliminar
    Respuestas
    1. Hola, aquí hay un Leer más que incluye esa característica:
      http://www.ciudadblogger.com/2011/01/leer-mas-con-imagenes-en-miniatura.html

      Pero primero deberás quitar el que tienes:
      http://www.ciudadblogger.com/2011/07/quitar-el-leer-mas-automatico-en-las.html

      Eliminar
  103. hola, gracias por tu ayuda, mi duda es si se puede agrandar la foto con un click y volver a empequeñecerla con otro click, solo uno. gracias

    ResponderEliminar
  104. Hola. Muy interesante tu blog. Me gustaría saber como hacer para poder hacer click en una imagen que he puesto a través de un gadget de imagen en el lateral y que salga en grande en otra pestaña por ejemplo. Ahora lo hago poniendo la url que copio con botón derecho pero la imagen sale pequeña.

    Ya me dices, muchas gracias.

    ResponderEliminar
  105. como le para que al darle click a una imagen se expanda en una ventana y tenga una opcion de cerrar

    ResponderEliminar
  106. como le para que al darle click a una imagen se expanda en una ventana y tenga una opcion de cerrar

    ResponderEliminar
  107. muy buen post la verdad lo lei todo y me gusto tus prontas respuesta para hacerlo en texto como seria

    ResponderEliminar
  108. Uff Justo lo que necesitaba, Perfecto, muy cool tu blogger

    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