Efecto elegante para tus imagenes con JQuery

Tweet

En esta ocasion veremos un elegante efecto para agregar a nuestras imagenes este es un efecto de DynamicDrive  obtenido de pazozblogger.com me gusto este efecto que he decidido aplicarlo en mi blog y pues creo que tambien les va a gustar
Podemos agregar a las imágenes de nuestro blog, este script te permite mostrar las imágenes ampliada en el centro de la pantalla del usuario, y con un solo click volverla a su tamaño original , aqui les dejo un ejemplo en blog de pruebas de PB

Al pasar el cursor por encima de una imagen, te mostrará una pequeña lupa con un signo + en señal de que la imagen se puede ampliar, este bonito efecto lo he probado y funciona bien en las ultimas versiones de los siguientes navegadores: IE, Opera, Firefox, Google Chrome,Internet explorer, etc




Para agregar este efecto simplemente este codigo antes de la etiqueta </head>

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jQuery1.3.2.min.js' type='text/javascript'/>

Ya tenemos la librería, ahora toca añadir el script justo después del código que acabamos de pegar justo antes de </head>:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jquery.lupa.zoom.js' type='text/javascript'/>

Ahora, puedes crear una entrada o si quieres poner la imagen en tu sidebar ve a  Diseño > Añadir gadget > elije > HTML/Javascript > y pega uno de los siguientes código para llamar el efecto, también lo puedes poner en una entrada:

<img src="URL-de-tu-imagen" class="magnify" style="width:200px;height:150px" />

<img src="URL-de-tu-imagen" class="magnify" border="0" />

El primer código lo puedes utilizar para cuando una imagen es demasiado grande, y quieres darle tu mismo las dimensiones necesarias para que entre bien en tu sidebar o en una entrada, widgt: es el ancho y height: el alto. El efecto zoom se aplicará con relación a las dimensiones de la imagen.

El segundo código, es para que una imagen se muestre en su tamaño normal, por ejemplo se puede utilizar para imágenes pequeñas, donde también se aplicará el efecto zoom de acuerdo a las demenciones base de la imagen.