Elard Salathiel Medina La Torre

Mi foto


Casi un diario de mi existir,
Una parte de mi tiempo,
En este Planeta llamado Tierra,
Un segundo un respirar,
Todo Gracias a Dios...
Y al Amor de mis Padres...
Que son mis Dioses en este Espacio.



OTALEMASLE@gmail.com


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


**


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


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 

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;
}
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.


ESCRITO POR Andrés Felipe Lozano



**

No hay comentarios:

Publicar un comentario

MMMNNNnnn...