0
Esta vez haremos algo 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.