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

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

sábado, 24 de enero de 2015

Libertad de Jean Paul Sartre

La libertad es lo que haces con lo que te han hecho.

Jean Paul Sartre
(1905-1980) Filósofo y escritor francés.

Frases celebres

viernes, 16 de enero de 2015

Арт к игре Legend of the Cryptids от Татьяны Киргетовой

**

**

Арт к игре Legend of the Cryptids от Марата Арсланова

Октябрь 2, 2013 · Просмотров: 1207 · Нет комментариев

Арт к карточной игре для мобильных устройств Legend of the Cryptids от российского художника Марата Арсланова.

sábado, 20 de diciembre de 2014

Datos Virales: Los acontecimientos científicos más importantes de...

Datos Virales: Los acontecimientos científicos más importantes de...: ¿CREACIONISMO O EVOLUCIÓN? El 4 de febrero, más de 3 millones de personas vieron en vivo el debate entre el educador científico Bil...