OTALEMASLE: domingo, 25 de enero de 2015

domingo, 25 de enero de 2015

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

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

8:56 p. m. blogger Comentarios

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 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/AVvXsEiKgNrL52v8jl-XLBGIPKFoycM_p-vvGmAv95m7cYtIB1tCzTIj9SRW9Rf3PL3SP9IzCIrdZ97R-9HpIQj0orfWZUQKF6CYbzYS7wBK_j0MRH73kpjPXUl5lX7UYVK3GtVNNY6lATWqylXO/s1600/fade.PNG);
border: 1px solid #000000;
cursor: pointer;
display: none;
height: 200px;
position: absolute;
width: 200px;
z-index: 100;
}