jQuery: ampliar una imagen con efecto elegante en blogger o pagina web

Con jQuery podemos ampliar una imagen con un bonito efecto. Anteriormente hemos visto 2 clase de efecto para ampliar imagen, les dejo los links por si les interesa, Imagen que se agranda al pasar el mouse por encima y Poner una lupa a todas las imágenes del blog al pasar el mouse por encima con CSS y jQuery.

El efecto que realizaremos hoy día es con un script de DynamicDrive, y es que este se puede traducir en un elegante efecto Zoom que 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. Pueden verlo funcionando en mi blog de pruebas

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, etcétera.

Para ponerlo en tu blog de blogger, tienes que tener la librería jQuery v1.3.2 en tu plantilla es posible que ya la tengas, si la tienes salta este paso, de lo contrario copia y pega el siguiente código 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 ante s 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.

Configuración Avanzada

Si te bajas el script puedes hacer algunas configuraciones. En la parte superior del código hay 3 variable que puedes configurar, para ello localiza esta parte del código en el script:

dsettings: {
magnifyby: 3, //factor de incremento por defecto de la imagen ampliada
duration: 500, //Duración predeterminada de la animación, en milisegundos
mgopacity: 0.2 //la opacificación de la imagen original, cuando la imagen ampliada la recubre
},
cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image

Como pueden ver se los dejo en color rojo las 3 variables que se pueden configurar y la parte que está en azul pueden poner la URL de su propia imagen ya sea una lupa o lo que ustedes quieran. Que fácil es usar jQuery para ampliar una imagen.

Descargar Script