Hacer zoom en las imagenes JQuery

  • octubre 14, 2010

El efecto Zoom en las imagenes es algo muy sencillo con JQuery :

Implementarlo s??lo requiere cuatro pasos: primero descarga este archivo, descompr??melo y sube el archivo zoom-clip.js a un servidor.

Luego entra en Dise??o | Edici??n de HTML y pega antes de </head> lo siguiente:

<script language=’javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’ type=’text/javascript’/>
<script language=’javascript’ src=’URL del archivo .js‘ type=’text/javascript’/>

Cambia lo que est?? en color rojo por la URL del archivo que previamente subiste al hosting.

Ahora antes de ]]></b:skin> pega esto:

#view {
border: 1px solid #333333; /* Borde de la imagen */
overflow: hidden;
position: relative;
width: 400px; /* Tama??o de la imagen */
}

#image {
display: block;
left: 0;
top: 0;
}

#zoom {
background-image: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TK4Oj4JLR6I/AAAAAAAAAZc/dcjleXweXTY/s1600/fade.PNG);
border: 1px solid #000000;
cursor: pointer;
display: none;
height: 200px;
position: absolute;
width: 200px;
z-index: 100;
}

Por ??ltimo usa este c??digo cuando quieras ponerle el zoom a tus im??genes:

<div id=»view»>
<img id=»image» src=»URL de la imagen» width=»400″ />
</div>

Cambia la URL de la imagen donde se indica y listo.
Ver??s que tanto en los estilos como en el ??ltimo c??digo hay un ancho de 400px, este es el ancho que tendr?? la imagen, si deseas cambiar el tama??o tendr??s que cambiar ambos valores que est??n marcados en negrita.



Fuente

No Comments Found