Efecto de zoom en las imágenes con jQuery

Hace poco vimos cómo aumentar las imágenes usando Zoom It, ahí les mencionaba que estos efectos de zoom se pueden conseguir con distintas librerías de scripts, uno de ellos es jQuery, y hoy veremos uno en particular que es una creación de Ben Nadel y que hace eso, seleccionar un área de la imagen para aumentarla.

Puedes ver el demo en este blog de pruebas. Al hacer click sobre el recuadro se hará un zoom, para quitar el zoom sólo basta dar click fuera de la imagen.

Implementarlo sólo requiere cuatro pasos: primero descarga este archivo, descomprímelo y sube el archivo zoom-clip.js a un servidor.

Luego entra en Diseño | Edición de HTML y pega antes de </head> lo siguiente:

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='URL del archivo .js' type='text/javascript'/>

Cambia lo que está en color rojo por la URL del archivo que previamente subiste al hosting.

Ahora antes de ]]></b:skin> pega esto:

#view {
border: 1px solid #333333; /* Borde de la imagen */
overflow: hidden;
position: relative;
width: 400px; /* Tamaño de la imagen */
}

#image {
display: block;
left: 0;
top: 0;
}

#zoom {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghTm_2r_QslmmGqmnUSfOjlmpXBcD6BCmuN03_Tnxvudhpiy9ssbGLTnua6teAEYTbBUF8QzYv3RFnOHftCtFkvYnG5INIrT7pLbJoG8LHUitCnsdvRxC1UFP5EY7UF72cqlCIWdCslALe/s1600/fade.PNG);
border: 1px solid #000000;
cursor: pointer;
display: none;
height: 200px;
position: absolute;
width: 200px;
z-index: 100;
}

Por último usa este código cuando quieras ponerle el zoom a tus imágenes:

<div id="view">
<img id="image" src="URL de la imagen" width="400" />
</div>

Cambia la URL de la imagen donde se indica y listo.
Verás que tanto en los estilos como en el último código hay un ancho de 400px, este es el ancho que tendrá la imagen, si deseas cambiar el tamaño tendrás que cambiar ambos valores que están marcados en negrita.