Imagenes ampliadas con JQuery

1 comentó



Los efectos con JQuery me encantan, y para muestra un boton (una imagen en este caso, jeje). En Blogger hace poco que nos han habilitado la opcion del "lightbox" en las imagenes, esto es algo parecido pero aun me gusta mas. Cuando pasamos el raton por la imagen, el cursor se convierte en una lupa y al hacer click sobre ella se amplia rapidamente con un efecto suave my molon. Al volver a dar click sobre ella, vuelve a su tamaño original.

Aqui teneis un ejemplo con unas cuantas imagenes:

  



Para poner este efecto tan chulo en vuestro blog o web, añadis el siguiente codigo en vuestra plantilla antes de </head>:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://hostredeando.ucoz.es/SCRIPTS-BLOG/jquery.magnifier.js" type="text/javascript">
/***********************************************
* Imagen amplada con jQuery
REDEANDO - tu blog webmaster
http://redeando.blogspot.com/
***********************************************/
</script>





Una vez hecho esto, ya solo nos queda añadir el siguiente codigo cada vez que querais poner una imagen con este efecto. Cambiais lo que esta en rojo por la url de la imagen y el tamaño y listo.


<img class="magnify" src="URL DE LA IMAGEN" style="height: 200px; width: 200px;" />