• Efectos nevada para web

    Efectos nevadas para Web

    Mozilla, IE, Chrome.

  • Galeria jQuery para imagenes

    Galeria jQuery para imagenes

    jQuerylightbox, etc

  • Easyzoom

    Galeria Easyzoom

    agrandar imagenes

  • Instalar foro php

    Como instalar un foro php

    Phpbb3 foro

  • Menu Jquery

    Menu jquery

    css estilo jquery

  • Login php

    Login php Mysql

    Inicio de sesion php

  • Sistema de comentarios

    Sistema de comentarios

    Php MysQl

  • Reloj

    Reloj digital para web

    Javascript

  • Contador de texto

    Contador de texto

    para formularios php

Imagen

Easyzoom jQuery galeria para enfocar imagenes de web ...

Escrito por Administrador, en localhost, easyzoom
Bien este efecto se llama easyzoom y debemos conocer su funcionamiento como verás en el demo al arrastrar el puntero sobre la imágen se produce el efecto si deseas más información ingresa a la página de su creador jQuery easyzoom su funcionamiento es simple depende de 2 imágenes una pequeña y una grande la cual la segunda es la que se amplía provocando su efecto.

Archivos para la utilización de esta galería :

easyzoom.js
jquery.js
index.html
estilo.css
Breve explicación suponiendo conocimiento previo por parte del lector de cómo utilizar las galerias jQuery.
Antes que nada deberás ordenar los archivos en tu localhost de forma que cada carpeta contenga ordenadamente sus archivos diferenciados por categoria ....
Vamos a incorporar en el css que direcciona a tu estilo la siguiente capa llamada easyzoom que va a proporcionar efecto.
#easy_zoom{
	width:570px; //ancho 570 pixeles
	height:400px;	// alto 400 pixeles
	border:5px solid #eee;  //borde de 5 pixeles + color 
	background:#fff;  //fondo del efecto
	color:#333;  //color de texto si lo hubiera
	position:absolute;
	top:700px;  //700 pixeles arriba tomando consideracion de pantalla
	left:400px;  //izquierda 400 pixeles tomando consideracion de imagen
	overflow:hidden;
	-moz-box-shadow:0 0 10px #777;
	-webkit-box-shadow:0 0 10px #777;
	box-shadow:0 0 10px #777;
	/* vertical y horizontal alineacion usada para precargar texto */
	line-height:400px;
	text-align:center;
	}

					
En tu index.html vas a incorporar entre <head> y </head> las respectivas galerías jQuery mas el script que va a dar el efecto easyzoom.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="easyzoom.js"></script>
<script type="text/javascript">
	
jQuery(function($){
	
	$('a.zoom').easyZoom();

});

</script>

					
Adiciona 2 imagenes a tu gusto ya que la siguiente instrucción va a necesitarlas deberás adicionar una imagen pequeña que se colocará en el index y una grande la cual el Jquery se encargará de presentar cuando arrastremos el mouse encima de ella como se muestra en el demo ...
Ahora esta instrucción va a mostrar la imágen y el efecto colocalo donde quieras que aparezca el efecto entre body y body:
<a href="ruta de la imagen grande.jpg" class="zoom"><img src="ruta de la imagen pequeña.jpg" alt="" /></a>

					
La libreria jQuery que podemos descargar gratuitamente desde la página de autor jquery.com y deberás guardar para su posterior uso.
Esta es al archivo easyzoom.js que deberás incorporar entre tus archivos
(function($) {
		  
	$.fn.easyZoom = function(options){

		var defaults = {	
			id: 'easy_zoom',
			parent: 'body',
			append: true,
			preload: 'Cargando imagen espere.....',
			error: 'Existen problemas para cargar la imagen.'
		}; 
		
		var obj;
		var img = new Image();
		var loaded = false;
		var found = true;
		var timeout;
		var w1,w2,h1,h2,rw,rh;
		var over = false;
		
		var options = $.extend(defaults, options);  
		
		this.each(function(){ 
				
			obj = this;	
			// works only for anchors
			var tagName = this.tagName.toLowerCase();
			if(tagName == 'a'){			   
				
				var href = $(this).attr('href');			
				img.src = href + '?' + (new Date()).getTime() + ' =' + (new Date()).getTime();
				$(img).error(function(){ found = false; })												
				img.onload = function(){ 									
					loaded = true;	
					img.onload=function(){};
				};	
				
				$(this)
					.css('cursor','crosshair')
					.click(function(e){ e.preventDefault(); })
					.mouseover(function(e){ start(e); })
					.mouseout(function(){ hide(); })		
					.mousemove(function(e){ move(e); })			
			};
			
		});
		
		function start(e){
			hide();			
			var zoom = $('<div id="'+ options.id +'">'+ options.preload +'</div>');
			if(options.append) { zoom.appendTo(options.parent) } else { zoom.prependTo(options.parent) };
			if(!found){
				error();
			} else {
				if(loaded){
					show(e);
				} else {
					loop(e);
				};				
			};			
		};
		
		function loop(e){
			if(loaded){
				show(e);
				clearTimeout(timeout);
			} else {
				timeout = setTimeout(function(){loop(e)},200);
			};
		};
		
		function show(e){
			over = true;
			$(img).css({'position':'absolute','top':'0','left':'0'});
			$('#'+ options.id).html('').append(img);			
			w1 = $('img', obj).width();
			h1 = $('img', obj).height();
			w2 = $('#'+ options.id).width();
			h2 = $('#'+ options.id).height();
			w3 = $(img).width();
			h3 = $(img).height();	
			w4 = $(img).width() - w2;
			h4 = $(img).height() - h2;	
			rw = w4/w1;
			rh = h4/h1;
			move(e);
		};
		
		function hide(){
			over = false;
			$('#'+ options.id).remove();
		};
		
		function error(){
			$('#'+ options.id).html(options.error);
		};
		
		function move(e){
			if(over){
				// target image movement
				var p = $('img',obj).offset();
				var pl = e.pageX - p.left;
				var pt = e.pageY - p.top;	
				var xl = pl*rw;
				var xt = pt*rh;
				xl = (xl>w4) ? w4 : xl;
				xt = (xt>h4) ? h4 : xt;	
				$('#'+ options.id + ' img').css({'left':xl*(-1),'top':xt*(-1)});
			};
		};
	
	};

})(jQuery);
					
Es todo cuanto puedo acotar de antemano gracias por visitar mis publicaciones espero les sirva en algún proyecto suerte...

Créditos :

Copyright (c) 2011 Alen Grakalic (http://cssglobe.com)
Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
Built for jQuery library jquery.com
comentarios impulsado por Disqus
25Agt2011