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 | 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í: 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; } 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 **