Agregar zoom a las imágenes con jQZoom

Webmaster 01/08/20112

jQZoom es un plugin de jQuery que nos permite agregarle zoom a las imágenes fácilmente. El sistema funciona como si estuviéramos utilizando una lupa, pues nosotros pasamos el cursor por ensima de una imágen y se nos despliega una ventana que nos muestra de forma más grande lo que estamos viendo. Pueden ver un ejemplo en mi blog de pruebas. Como pueden ver, es muy útil para ver aquellos detalles de las imágenes muy grandes sin tener que ocupar tanto espacio en el blog. A continuación les explico como colocarlo en sus blogs:

[1] Lo primero que vamos a hacer es ir a Diseño > Edición de HTML y vamos a pegar antes de ]]</b:skin> lo siugiente:

div.jqZoomTitle
{
z-index:5000;
text-align:center;
font-size:11px;
font-family:Tahoma;
height:16px;
padding-top:2px;
position:absolute;
top: 0px;
left: 0px;
width: 100%;
color: #FFF;
background: #999;

}

.jqZoomPup
{
overflow:hidden;
background-color: #FFF;
-moz-opacity:0.6;
opacity: 0.6;
filter: alpha(opacity = 60);
z-index:10;
border-color:#c4c4c4;
border-style: solid;
cursor:crosshair;
}

.jqZoomPup img
{
border: 0px;
}

.preload{
-moz-opacity:0.8;
opacity: 0.8;
filter: alpha(opacity = 80);
color: #333;
font-size: 12px;
font-family: Tahoma;
text-decoration: none;
border: 1px solid #CCC;
background-color: white;
padding: 8px;
text-align:center;
background-image: url(https://dl.dropbox.com/u/3301800/jquery/zoomloader.gif);
background-repeat: no-repeat;
background-position: 43px 30px;
width:90px;
* width:100px;
height:43px;
*height:55px;
z-index:10;
position:absolute;
top:3px;
left:3px;

}

.jqZoomWindow
{
border: 1px solid #999;
background-color: #FFF;
}

[2] Luego vamos a buscar la linea </head> y antes de ella vamos a pegar lo siguiente:

<script src=’http://dl.dropbox.com/u/3301800/jquery/jquery-1.3.2.min.js’ type=’text/javascript’/>
<script src=’http://dl.dropbox.com/u/3301800/jquery/jqzoom.pack.1.0.1.js’ type=’text/javascript’/>

<script type=’text/javascript’>

$(function() {
$(".jqzoom").jqzoom();
});
</script>

La linea en rojo no la deben poner si es que ya utilizaron algún efecto de jQuery anteriormente, ya que puede que surjan incompatibilidades en caso de tenerla agregada dos veces.

[3] Ahora simplemente debemos pegar el siguiente código en un gadget HTML/Javascript o en una entrada:

<a class=»jqzoom» href=»» style=»» title=»Los Simpsons«><img src=»» title=»Los Simpsons» style=»border: 1px solid #666;»></a>

Modificaciones:

En rojo: Es la imagen grande, osea la que veremos al pasar el cursor por la imagen pequeña.
En verde: Es el título de la imagen al desplegar la «lupa».
En azul: La miniatura de imagen que queremos ver grande, recomiendo que sea la misma que la grande sólo que anteriormente debemos haberla disminuida con el Photoshop o Gimp.