9.02.2013

Aprende a agrandar tus imágenes pasando el puntero por encima

Hoy os traigo, una vez mas, otro tutorial de personalización para vuestros blogs. Esta vez se trata de "Expando", un script que hará que cualquier imagen que vosotros queráis de vuestro blog aumente su tamaño con un efecto deslizante realmente simple y bonito, y al quitar el cursor la imagen recuperara su tamaño original también con el mismo efecto. Esto nos permitirá crear entradas con montones de imágenes en forma de galería y que quede todo bien ordenado y agradable a la vista.

Para ver como quedaría este efecto en una entrada podéis entrar en mi blog de pruebas pinchando en la imagen de la entrada.


Si te ha gustado y lo quieres en tu blog, lo que tendrás que hacer sera:
- Entrar en la edición del código HTML de tu blog (en la pestaña plantilla).
- Una vez allí buscar la palabra </head>.
- Cuando la tengas localizada, añades el siguiente código justo antes.

<script type='text/javascript'>//<![CDATA[

/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>

<style>
img.expando{
margin:10px;
vertical-align: top;
}
</style>


Y ya estaría casi terminado, ahora lo único que tendrás que hacer para insertar una imagen con estas características sería utilizar este código (Que pegaremos en el apartado HTML de nuestra entrada y no en el apartado ''Redactar'')

<img border="0" src="URL de la imagen" class="expando" width="100" /> 

Y por último, sustituir URL de la imagen  por la dirección a la imagen que vosotros queráis y el 100 por el tamaño que le queráis dar a la miniatura de vuestra imagen. Así de fácil, ya tendremos este efecto en nuestro blog.
Espero que os haya gustado y no dudéis en comentar si tenéis alguna duda.

Un saludo

Twitter Instagram

9 comentarios

  1. Es genial!! Aunque por ahora no lo pondré, temo que la web empieze a ir lento.
    Pero me lo apunto, por si lo necesito algun día.
    (Podrías poner más cosas asi,que a mi me encanta.)

    Un beso.

    ResponderEliminar
  2. Anda, queda muy chulo! :o
    Me lo apunto por si algún día necesito una cosa así jiji

    Besitoooooooooooos

    ResponderEliminar
  3. Gracias por la información, siempre va bien saberlo ;)
    Besos,

    ResponderEliminar
  4. Genial :)
    Siempre es mejor saber más cosas, por si alguna vez se quiere cambiar algo haha

    Un beso^^

    ResponderEliminar
  5. Qué original^^ Se agranda muchísimo, dios c:

    ResponderEliminar

El Inventario. All rights reserved.
Blog design by labinastudio.