Ampliar imagen al hacer click

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:

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.