Agrandar nuestras imágenes con JavaScript

Hoy vamosa mostraros como podemos agrandar una imagén usando JavaScript.

Nota: Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.
Puedes ver en este post como lo hacemos paso a paso

Insertar codigo

 Nos vamos a Tema > Editar HTML.
En nuestra plantilla buscamos </head>
Justo antes de este código incrustamos el siguiente código

<script type='text/javascript'>
// C.2004 by CodeLifter.com
var nW,nH,oH,oW;
function zoomToggle(iWideSmall,iHighSmall,iWideLarge,
iHighLarge,whichImage){
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge)){
nW=iWideSmall;nH=iHighSmall;}else{
nW=iWideLarge;nH=iHighLarge;}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>

Guardamos y listo.

En la entrada en la edición HTML pegamos el siguiente código.

<img src="URL-DE-LA-IMAGEN" width="100" height="100" onclick="zoomToggle('100px','100px','200px','200px',this);">

img src="URL-DE-LA-IMAGEN" aquí colocamos la URL de la imagen que queremos que tenga el efecto zoom.
width="100" height="100" y '100px','100px','200px','200px' es el ancho y alto de la imagen antes y después de agrandar respectivamente; podemos cambiar las medidas a nuestras necesidades.