Zoom en las imágenes

Hoy vamos a ver cómo podemos ampliar una imagen con tan solo un click y en el mismo post, sin que se tenga que abrir la imagen completa en otra ventana.

Para hacerlo, debemos seguir los siguientes pasos:

♠ Ingresamoa a Diseño/ Edición de HTML y en la plantilla buscamos </head>
♠ Antes de </head> escribimos el siguiente código y damos click en Guardar:

<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>

♠ Después, en el editor de entradas o donde querramos que aparezca la imagen, escribimos:

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

Ahora, vamos con la explicación:

♥ 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.

Ejemplos (hacer click en las imágenes para ver el efecto):