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'/>Cambia lo que está en color rojo por la URL del archivo que previamente subiste al hosting.
<script language='javascript' src='URL del archivo .js' type='text/javascript'/>
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">Cambia la URL de la imagen donde se indica y listo.
<img id="image" src="URL de la imagen" width="400" />
</div>
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:
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!
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
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
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