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.
Te recomendamos:
¿Cómo excluir mis visitas de las estadísticas del blog o web?julio 20, 2011
Codigo ASCIIabril 8, 2011
Diferencias y significado de dominios .com .net .org .es ¡y más!mayo 18, 2010
Como crear categorias en Bloggerjulio 26, 2010
WidgetTraductor multilenguaje para tu blogjulio 9, 2010
FreeBlogApps: crea crea una aplicación de tu blog para Android de forma gratuita y fácilfebrero 21, 2012
Enlaces de calidad hacia tu sitio webjulio 13, 2010
Agregar redes sociales en Bloggerjulio 12, 2010
Cuantos links necesito para subir mi pagerank.enero 10, 2011
Blogger vs WordPress Infografíaenero 27, 2012
Orales, esto no lo sabia, gracias!.
gracias a ti.