Zoom para imágenes con jQuey

Este efecto tan curioso que vamos a ver es de Dynamicdrive y seguramente ya lo vimos con anterioridad en algunas páginas de wallpapers, lo que conseguimos es mostrar una imagen pequeña y al pasar el puntero del ratón visualizar los detalles de dicha imagen con efecto zoom con la posibilidad de acercar más la imagen con la rueda del ratón.

Se consigue gracias a jQuery y si estamos utilizando otra librería no es problema porque podemos conseguir mostrar el ejemplo en un iframe, es decir, añadir el script y los estilos en otro blog y mostrarlos allí donde deseamos. Ver explicaciones en Vagabundia sobre Blogger ultra super minimizado

Ahora si que es el momento de poner manos a la obra porque aunque a simple vista de la sensación de ser algo complicado en realidad no lo es si entendemos su funcionamiento.

Para empezar conseguimos dos imágenes iguales, una de gran tamaño para el efecto zoom que nos permitirá ver los detalles de la imagen y otra de menor tamaño que será la que se mostrará nada más cargar la página.

Una vez tenemos las dos imágenes nos situamos en plantilla edición de HTML, allí localizamos </head> y justo antes añadimos lo siguiente:

(Si ya estamos utilizando jQuery omitimos este paso porque quiere decir que ya tenemos jquery.min.js añadido )

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Justo después añadimos el contenido de este archivo.
Guardamos los cambios para no perderlos y nos familiarizamos con lo que añadimos:

Allí podemos ver en primer lugar los estilos de la imagen del zoom y a continuación el script más extenso. Al principio del primer script veremos la siguientes líneas:

jQuery.noConflict()

var featuredimagezoomer={
loadinggif: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBa8hoczcsDRwsEj6hCTfQTDRMttGFukiCtEOPIfpcXBxbW62v1iPgLuJ8zvqKaWR3xLkIsmDSbD04f_5oFWHWtXh9RZ2PVpJxiWLd3R_lKvaMOg9gUjosItNOwtoX1NxPsuY-4j1ZtTfa/s0/spinningred.gif', //full path or URL to "loading" gif

Lo marcado en color rojo es la imagen de carga que podemos cambiar por otra simplemente sustituyendo la url de la imagen.

El siguiente script es el sitio para añadir la url de la imagen grande y también especificar el tamaño que se mostrará en el zoom.

$('#image1').addimagezoom({

zoomrange: [3, 10],

magnifiersize: [300,300],

magnifierpos: 'right',

largeimage: 'url-imagen-1' //<-- No comma after last option!

}

Donde url-image-1 añadimos la primera imagen grande.

El primer valor es para la anchura de la imagen que nos mostrará el zoom, el segundo valor será para la altura. 

Si mostramos el efecto en una entrada debemos tener en cuenta el ancho de la miniatura y el que especificamos para la imagen del zoom porque la suma de los dos anchos no debe ser superior a nuestras entradas de lo contrario nos creará problemas y no quedará demasiado bien estéticamente.

Para añadir el efecto más de una vez, procedemos de la misma forma que la anterior,  lo haremos a continuación donde dice #image2. Veremos que a continuación tenemos preparado para añadir una tercera imagen a falta de añadir las propiedades de imagen, si dudamos también podemos copiar el código anterior y cambiar de forma que sea #image3 ó #image4 y así sucesivamente.

$('#image3').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: 'right',
largeimage: 'url-imagen-3' //<-- No comma after last option!
})

Terminamos con la plantilla guardando los cambios y nos dirigimos justo al sitio que deseamos mostrar el efecto. Si es un gadget editamos un gadget de HTML. En el interior del gadget o entrada añadimos lo siguiente:

<img border="0" height="160" id="image1" src="url-imagen-pequeña" width="200" />

Con width establecemos la anchura de la imagen pequeña y con height la altura, sin olvidar que deben ser iguales las dos imágenes, y a su vez coinciden con la misma  id.