Hace poco vimos cómo aumentar las imágenes usando Zoom It, ahí les mencionaba que estos efectos de zoom se pueden conseguir con distintas librerías de scripts, uno de ellos es jQuery, y hoy veremos uno en particular que es una creación de Ben Nadel y que hace eso, seleccionar un área de la imagen para aumentarla.
Puedes ver el demo en este blog de pruebas. Al hacer click sobre el recuadro se hará un zoom, para quitar el zoom sólo basta dar click fuera de la imagen.
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSTeSYTy4keQVgip7Gt2l6Zt8TRqdRGfteJ62wLlAStsHH_zaeI7HKh962uBfHOupLg3U54DbSLX-7VdpA3wEk8pV-kcjWW7_1boPKp-ub94YHk46XJwVjikIRiuzYcAXITonGUCpwmpfA/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.
0 comentarios:
Publicar un comentario
¡Gracias por comentar!