BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Easy Zoom... ampliar fotos con clase para ver detalles con jQuery

03/MAR/2011 24.146 visitas Ver comentarios
Easy Zoom... ampliar fotos con clase para ver detalles con jQuery

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Easy Zoom es un plugin jQuery que veo de la mano de CSS Globe que me parece muy fácil de aplicar 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.

Es fácilmente configurable mediante CSS y tiene pocas opciones que tocar realmente, agregar un preloader o poco más, porque, desde ya, no necesita muchas más opciones.

Vamos a ello...
Para instalar el Easy Zoom plugin de jQuery en tu web, debes hacer lo siguiente:

Y listo. He puesto una demo basada en la original, pero con una foto que me gusta más y aquí abajo te dejo los códigos que utilizo.

Código 1 - HTML
<link type="text/css" rel="stylesheet" href="default.css" />
<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(); // lo aplica a 1
$('a.zoom').each(function(){ $(this).easyZoom(); }); // lo aplica a todas las imágenes que tengan a.zoom
});
</script>
Código 2 - HTML
<p><a href="large.jpg" class="zoom"><img src="small.jpg" alt="Mercedes GP"></a></p>
Código 3 - CSS
body, table, input, textarea, select, li, button{
	font:1em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	line-height:1.5em;
	color:#333;
	}	
body{	
	font-size:12px;
	background:#fff;		
	}	
	
	img{border:0}
	
#container{
	padding:30px;
	}	
	
	#easy_zoom{
	width:600px;
	height:400px;	
	border:5px solid #eee;
	background:#fff;
	color:#333;
	position:absolute;
	top:60px;
	left:400px;
	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;
	}

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018