Ampliar imágenes

Hay cosas que cuando las veo me gustan tanto que no puedo resistirme a probar, como en este caso el script sobre el que J.Miur comenta en su blog.

El resultado es conseguir que las imágenes sean mostradas en mayor tamaño con un click sin salir de la página. Me adelanté a decir de qué va el tema pero es igual veamos como añadirlo al blog y los resultados.

Nos situamos en plantilla Edicción de HTML y añadimos el script antes de </head>

<script type='text/javascript'>

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>

Una vez añadido ya podemos hacer uso de él en cualquier imagen, para ello bastará con añadir lo siguiente:

<img src="url_de_imagen" width="ancho1" height="alto1" onclick="zoomToggle('ancho1px','alto1px','ancho2px','alto2px',this);">





Sustituimos ancho1px y alto1px por el tamaño de la imagen a mostrar inicialmente, donde ancho2px y alto2px es el tamaño de la imagen al hacer clic sobre ella.

Según J.Miur es recomendable que los atributos (width="ancho1" height="alto1") tengan el mismo valor que los de la función (ancho1px','alto1px) pero no interfiere en nada si no es así.



Ver entrada original en Vagabundia