Escrito por: Martín el 03-03-2011 12:24:17 y leído 10139 veces

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:

• Paso 1: Preparar tus fotos en miniatura y grande.
• Paso 2: Mostrar la foto en miniatura enlazada a la foto grande con un class="zoom" agregado dentro del <a>.
• Paso 3: Personalizar el CSS para adecuar la forma en que se muestra la foto ampliada.
• Paso 4: En realidad debería ser el paso 1, agregar la librería jQuery y el .js del plugin.

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 XHTML

<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();
	});
</script>

Código XHTML

<p><a href="large.jpg" class="zoom"><img src="small.jpg" alt="Mercedes GP"></a></p>

Código 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;
	}

Categorías: Zoom • Jquery • Ampliar Imágenes •

Artículos relacionados:

• 20 plugins para jQuery que no pueden faltar en tus webs
• Excelente listado de 240 plugins para jquery
• Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
• jQuery Validate: la rápida validación de formularios.
• Formularios web con jQuery Validate y envío por phpmailer y gmail
• Calendario en PHP con eventos, jQuery y vTip
• 18 plugins jquery que no pueden faltar en tu web parte 2

100 Búsquedas de este artículo:

easy zoom • jquery ampliar imagen • ampliar imagen jquery • easyzoom • ampliar imagen con jquery • script zoom fotos • easy zoom jquery • jquery agrandar imagen • galeria imagenes jquery • ampliar imagenes jquery • zoom imagenes jquery • zoom jquery • agrandar imagen con jquery • agrandar imagen jquery • ver detalles de fotos • jquery ampliar foto • jquery galleria para reducir agrandar una imagen • ampliar foto con jquery • zoom en imagenes con jquery • ampliar foto jquery • ampliar una imagen con jquery • programa para ver detalles de fotos • ampliar foto online • jquery zoom imagenes • easyzoom js • zoom para fotos • pasar fotos con jquery • jquery ampliar imagenes • ampliar imagenes con jquery • jquery agrandar imagenes • agrandar imagenes con jquery • jquery ampliar • zoom fotos jquery • agrandar imagenes jquery • zoom de imagen en flash pasando el mouse • galeria jquery ampliar • jquery easyzoom • Plugin para ampliar imagenes jquery • jquery para ver imagenes • ampliar fotos jquery • ampliar imagen css • jquery zoom fotos • ampliar • ampliar javascript • jquery zoom div • ampliar fotos online • zoom de imagenes jquery • imagen zoom jquery • zoom image jquery • jquery fotos • jquery ver fotos • abrir imagen en grande jquery • ampliar imagenes css • ampliar fotografia jquery • jquery draggable • jquery expandir imagen • cache:He8EYZuSmrQJ:www martiniglesias eu/blog/easy-zoom-ampliar-fotos-con-clase-para-ver-detalles-con-jquery/111 plugin jquery easyzoom • eazy zoom • abrir imagenes jquery • uso de zoom js • galerias jquery zoom • jquery ampliar img • ampliar fotos con jquery • programa para ampliar fotos online • aumentar fotos online • jquery galerias de fotos ampliar • mostrar imagenes con zoom • hacer zoom con jquery • ver zoom fotos • http://www martiniglesias eu/blog/easy-zoom-ampliar-fotos-con-clase-para-ver-detalles-con-jquery/111 • zoom en fotos web jquery • codigo de como hacerle zoom a una imagen en java • ampliar una foto online • zoom fotografias • agrandar una foto online • script para ampliar imagenes • jquery aumentar fotografia • imagenes rotan programa FLASH • jquery imagenes zoom • zoom de fotos jquery • script visualizar pdf blogger • jquery galeria detalle foto zoom • agrandar una imagen con jquery • zoom fotos • galeria con jQuery expandir foto • ampliar fotos • css3 para agrandar imagenes • crecer imagenes con jquery • agrandar foto jquery • jquery zoom easy • ver fotos zoom • Fotos de clase • codigo para ampliar imagen • ampliar imagen pasar raton jquery • script foto zoom • jquery imagen ampliada • galeria de imagenes con zoom jquery • query para ampliar fotos • como ampliar una imagen para ver detalles • ampliar detalles de una foto •