jueves, 14 de octubre de 2010

Hacer zoom en las imagenes JQuery

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 imagenwidth="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

4 comentarios:

Danny dijo...

Donde queda ese ]]> ???? hablas del introducir eso en el index no?? xq no todas las paginas tienen archivos llamados "dise#os" x favor no hcr post tan tcnicoos! parec q t lo explicaras solo para ti!

De todo para los blogger dijo...

HOla Dany, tranki quepoco a poco aprenderás, pulsa Ctrl y f y te saldrá una ventanuca para buscar lo que quieras en la pantalla que estes.
ya me contaras
Gracias y saludos

Javierpal dijo...

Oye pero eso de ]]> No me aparece en mi codigo de Blogger ya le puse control+F y no me lo encuentra, me lo marca en rojo

Javierpal dijo...

Una cosa mas, No me muestra nada, creo que es por el archivo, lo subi a Megaupload, pero no se si esta al o bien, y si alfinal le falta el .js

Publicar un comentario en la entrada

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones