Poner efecto de Zoom en las imágenes usando Jquery - Blogger


imagen tomada gentilmente de ciudadblogger.com
 Un post más en Bloggin Red, el día de hoy les mostraré como aplicar el efecto de Zoom a nuestras imágenes en el blog consta de algunos cortos pasos y estuvo haciendo uso claro de Jquery.
Puedes ver un demo de el siguiente truco funcionando en una imagen aquí:

http://innerfade.blogspot.com/2010/10/zoom-and-clip.html
FUNCIONAMIENTO: Click derecho para acercar cada vez más, y un click fuera de la imagen para que vuelva a su estado normal.
Muy bien ahora vamos a lo más importante como agregarlo a nuestro blog para ello descargamos el siguiente archivo, lo subimos a un servidor o hosting podemos usar dropbox (click aquí para más info).

Luego de tener listo el anterior paso, vamos a plantilla | Edición HTML y antes de </head> pegamos 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'/>
Sólo cambiamos lo que está en rojo por lo que se subió al hosting del archivo js.

Ahora buscamos esto ]]></b:skin> y antes de ello pondremos lo siguiente:
#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/AVvXsEjAXtTl2aZwPHMrofQWsdE3JPuKLLopXSODun2cc7RvQea243lN7vOWqw-eIRV-i6bGdxCu-llqP2JfDhIIYxNrvGFd_z9vsRswRpYFybhvAyr2WRqb6UTUF6Wqkl1w_YCAeBOK7WZVi5RS/s1600/fade.PNG);
border: 1px solid #000000;
cursor: pointer;
display: none;
height: 200px;
position: absolute;
width: 200px;
z-index: 100;
}
Y para terminar para poder darle el efecto zoom a una de tus imágenes simplemente usarás el siguiente código en las entradas o ya sea en la plantilla depende de ti:
<div id="view">
<img id="image" src="URL de la imagen" width="400" />
</div>
Y es todo amigos en este post, hasta la próxima.

2 comentarios:

  1. El cuadro de la lupa ocupa todo el alto de la imagen y solo funciona con una sola foto, no con varias en la misma entrada aun usando el mismo codigo

    ResponderBorrar

ESTAMOS EN: