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


4 opinaron:

Anónimo

Me encantó el script; me parece muy útil

Responder
Cardenal Farenas

Hola Jéssica, estuve mirando cositas en tu blog y me gusto mucho. Seguiré pasando con regularidad, ya te he enlazado.

Bendiciones

Responder
Jéssica YK

Genial: espero que te sirva el script.

Saludos

Responder
Jéssica YK

Cardenal Farenas: bienvenido al blog y claro, puedes venir cuando desees.
Por supuesto,ya te agregué en la sidebar donde dice blogs recomendados.

Saludos

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio