AMPLIAR LAS IMAGENES DE UNA MANERA MUY SENCILLA
Este es un script sencillo creado por CodeLifter que permite implementar un zoom sencillo sobre cualquier imagen para permutar entre dos tamaños con un simple click.
<script type='text/javascript'>
//<![CDATA[
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>
//<![CDATA[
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>
Da un clic en “Guardar”
Y luego, lo agregamos en cualquier imagen agregando unos pocos datos:
<img src="URL_imagen" width="ancho1" height="alto1" onclick="zoomToggle('ancho1px','alto1px','ancho2px','alto2px',this);">
Ahora vamos a configurar para que funcione:
Donde pone ancho1 y alto1 son el tamaño de la imagen inicial, la que vemos en la página y ancho2 y alto2 son el tamaño de la imagen amplaida, la que veremos al hacer click en la imagen.
La función puede usarse en cualquier imagen y en varias en la misma página.
Ahora vamos a configurar para que funcione:
Donde pone ancho1 y alto1 son el tamaño de la imagen inicial, la que vemos en la página y ancho2 y alto2 son el tamaño de la imagen ampliada, la que veremos al hacer clic en la imagen.
La función puede usarse en cualquier imagen y en varias en la misma página.
Vamos a la explicación practica.
<img src="URL_imagen" Poneis la URL de la Imagen de la medida que queráis.
En el primer width="ancho1" height="alto1" Poneis las medidas de la imagen que habéis colocado.
El segundo ('ancho1px','alto1px', Las medidas que quereis que aumente las imagenas.
El tercer 'ancho2px','alto2px' Las mismas medidas que el primero las medidas de la foto original para que cundo le des otra vez clic vuelva a la medida original.
Y esto es todo amigos
Fuente; vagabundia
Fecha:13/01/2017
Publicado por:
0 comentarios