Easy Image Zoom jQuery
Easy Zoom es un plugin jQuery muy sencillo de emplear para aquellas webs de tiendas online (en especial, ropa) donde quieren mostrar detalles de las fotos ampliando por sectores y de un modo no intrusivo ni con un popup.
Este plugin trabaja con 2 fotografías, la pequeña y la grande y su función es que, al pasar el ratón e ir moviéndolo por la foto en miniatura, nos mostrará en un div flotante el sector de la foto ampliada correspondiente a la posición del ratón actual.
También podemos utilizar la misma fotografía en un tamaño grande y redimensionarla más pequeña en el objeto de la imagen a procesar pero esta opción no es recomendable si se quieren visualizar correctamente todas las imágenes, si que podría resultar en el caso de que no tengamos imágenes pequeñas y no tengamos medios para crear una miniatura.
Para añadirlo a nuestra página tan solo necesitaremos incorporar en nuestro <head> los estilos necesarios, la librería jQuery, el plugin y su llamada.
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="easyzoom.js"></script>
<script type="text/javascript">
jQuery(function($){
$('a.zoom').easyZoom();
});
</script>
Sobre estilos tan solo necesitamos la configuración del elemento flotante:
#easy_zoom{
width:600px;
height:600px;
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:60px;
left:350px;
overflow:hidden;
-moz-box-shadow:0 0 10px #777;
-webkit-box-shadow:0 0 10px #777;
box-shadow:0 0 10px #777;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}
Y luego en nuestro <body> añadiremos la imagen
<a href="big_image.jpg" class="zoom"><img src="small_image.jpg" /></a>
Es muy fácil de configurar la posicón del elemento flotante donde se está mostrando la imagen ampliada mediante CSS.
Autor
¿Buscas trabajo de programador?
Una respuesta a “Easy Image Zoom jQuery”
Deja una respuesta
58 artículos que te podrían interesar
That’s not even 10 mieunts well spent!