Foros del Web » Creando para Internet » HTML »

Galeria de Imgen (HTML- JavaScript)

Estas en el tema de Galeria de Imgen (HTML- JavaScript) en el foro de HTML en Foros del Web. Tengo el siguente codigo, pero por alguna razon, el efecto de imagenes girando, no me funciona, no se aquien dirigirme ni a donde, Código: <!DOCTYPE ...
  #1 (permalink)  
Antiguo 25/07/2011, 13:29
 
Fecha de Ingreso: febrero-2007
Ubicación: Caracas
Mensajes: 148
Antigüedad: 10 años, 1 mes
Puntos: 6
Galeria de Imgen (HTML- JavaScript)

Tengo el siguente codigo, pero por alguna razon, el efecto de imagenes girando, no me funciona, no se aquien dirigirme ni a donde,

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<head>  
<title>the difference - interactive DHTML</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">  
<meta http-equiv="imagetoolbar" content="no">  
<style type="text/css">
    	html {  		
		        overflow: hidden;
	  	} 
		body {
				margin: 0px;  		
				padding: 0px;
				background: #000; 
				position: absolute;
				width: 100%;
				height: 100%; 
		}
		#screen {
				position:absolute;
				left: 00%;
				top: 0%;  		
				width: 100%;  		
				height: 100%;  		
				background: #000;  		
				overflow: hidden;  	
		}  	
		#screen img {  		
		        position: absolute;  		
				cursor: pointer;  		
				left: -4000px;  		
				filter: fliph flipv;  		
				-ms-interpolation-mode:nearest-neighbor;  	
		}  	
		#screen canvas {  		
		        position: absolute;  		
				cursor: pointer;  		
				width: 0px;  	
		}  	
		#credit {  		
		        position: absolute;  		
				color: #888;  		
				font-family: verdana, arial, helvetica, sans-serif;  		
				font-size: 0.8em;  		
				right: 1em;  		
				text-align: right;  		
				bottom: 2px;  	
		}  	
		#b1 {  		
		        position:absolute;  		
				width:100%;  		
				height:10%;background:#FFF;  	
		}  	
		#b2 {  		
		    	position:absolute;  		
				width:100%;  		
				height:10%;  		
				background:#FFF;  		
				bottom:0px;  	
		}  	
		a {text-decoration: none;color:#333;}  	
		a:hover	{text-decoration: none;background:#ff8000;color:#fff;}  	
		a:visited {text-decoration: none;color:#333;}  	
		a:visited:hover {text-decoration: none;background:#ff8000;color:#fff;}  
</style>      
<script type="text/javascript">  
// ==================================================  
//        ===== images 3D carousel ====  
// script written by Gerard Ferrandez - February 2007  
// http://www.dhteumeuleu.com  // GFX oliver ottner: http://www.naturemorphosis.com/  
// updated: February 2010 - CANVAS flipv / fliph  
// updated: January  2011 - IE9 compatibility  
// ==================================================      
var car = {  	
		scr  : 0,  	
		img  : 0,  	
		xm   : 0,  	
		ym   : 0,  	
		xmb  : 0,  	
		ymb  : 0,  	
		drag : false,  	
		cosY : 0,  	
		cosX : 0,  	
		sinY : 0,  	
		sinX : 0,  	
		xd   : 0,  	
		yd   : -10,    	
		run : function () {  		
				/* ==== rotation speed ==== */  		
				var Ay = car.xd / (car.scr.offsetWidth * .2);  		
				var Ax = car.yd / (car.scr.offsetHeight * .2);  		
				/* ==== vertical / horizontal friction ==== */  		
				if(!car.drag){  			
						if(Math.abs(car.xd) > Math.abs(car.yd)){  				
								car.xd *= .99;  				
								car.yd *= .95;  			
						} else {  				
								car.xd *= .95;  				
								car.yd *= .99;  			
						}  		
				}
				/* ==== rotation angles ==== */  		
				car.cosY = Math.cos(Ay);  		
				car.cosX = Math.cos(Ax);  		
				car.sinY = Math.sin(Ay);  		
				car.sinX = Math.sin(Ax);  		
				/* ==== animate images ==== */  		
				for(var i = 0; i < 8; i++) car.img[i].rotate();  		
				/* ==== loop ==== */  		
				setTimeout(car.run, 16);  	
		},    	
		/* ==== mouse mov ==== */  	
		mouse : function (e) {  		
				this.xm = e.clientX;  		
				this.ym = -e.clientY;  		
				if(this.drag){  			
						this.xd = this.xm - this.xmb;  			
						this.yd = this.ym - this.ymb;  		
				}  		
				this.xmb = this.xm;  		
				this.ymb = this.ym;  	
		},    	
		/* ==== dim screen ==== */  	
		resize : function () {  		
				car.nw = car.scr.offsetWidth;  		
				car.nh = car.scr.offsetHeight;  	
		},    	
		/* ==== init script ==== */  	
		init : function () {  		
				/* ==== window mousemove event ==== */  		
				document.onmousemove = function (e) {  			
						if (window.event) e = window.event;  			
						car.mouse(e);  		
				}  		
				/* ==== window onresize event ==== */  		
				onresize = car.resize;  		
				/* ==== init images ==== */  		
				this.scr = document.getElementById('screen');  		
				var img = this.scr.getElementsByTagName('img');  		
				this.img = [];  		
				car.resize();  		
				var k = 0;  		
				for(var xi = -1; xi <= 1; xi+=2) {  			
						for(var yi = -1; yi <= 1; yi+=2) {  				
								for(var zi = -1; zi <= 1; zi+=2) {  					
										var o = img[k++];  					
										/* ==== replace images by canvas ==== */  					
										if (document.createElement("canvas").getContext) {  						
												var src = o;  						
												o = document.createElement("canvas");  						
												o.canvas = true;  						
												/* ==== flip function ==== */  						
												o.flip = function (fx, fy) {  							
														var context = this.getContext("2d");  							
														context.translate(fx<0?this.w:0, fy<0?this.h:0);  							
														context.scale(fx, fy);  							
														context.drawImage(this.img, 0, 0, this.w, this.h);  						
												}  						
												o.img = src;  						
												this.scr.appendChild(o);  					
										}  					
										/* ==== HTML Objects ==== */  					
										this.img.push(o);  					
										o.css = o.style;  					
										o.x3d = xi;  					
										o.y3d = yi;  					
										o.z3d = zi;  					
										o.py  = 0;  					
										o.px  = 0;  					
										o.onselectstart = function () { return false; }  					
										o.ondrag        = function () { return false; }  					
										o.onmousedown   = function () {  						
												car.drag = true;  						
												car.xd = 0;  						
												car.yd = 0;  						
												this.css.cursor = "move";  						
												return false;  				
										}  					
										o.onmouseout    = function () {car.drag = false; this.css.cursor = "pointer"; return false; }  					
										o.onmouseup     = function () {car.drag = false; this.css.cursor = "pointer"; return false; }  					
										o.rotate        = function () {  						
												/* ==== trigo ==== */  						
												var tz   = this.z3d * car.cosY - this.x3d * car.sinY;  						
												this.x3d = this.z3d * car.sinY + this.x3d * car.cosY;  						
												this.z3d = this.y3d * car.sinX + tz * car.cosX;  						
												this.y3d = this.y3d * car.cosX - tz * car.sinX;  						
												var zf   = 1 / (this.z3d / 10 + 1);  						
												var x2d  = this.x3d * zf * car.nw * .2;  						
												var y2d  = this.y3d * zf * car.nh * .2;  						
												var w2d  = Math.abs(x2d * 1.6);  						
												var h2d  = Math.abs(y2d * 1.6);  						
												if (this.loaded) {  							
														/* ==== HTML animation ==== */  							
														this.css.left   = Math.round(car.nw * .5 - x2d - w2d * .5) + 'px';  							
														this.css.top    = Math.round(car.nh * .5 - y2d - h2d * .5) + 'px';  							
														this.css.width  = Math.round(w2d) + 'px';  							
														this.css.height = Math.round(h2d) + 'px';  							
														this.css.zIndex = Math.round(zf * 100);  							
														/* ==== flipv ==== */  							
														if ((y2d < 0) != this.py) {  								
																this.py = (y2d < 0);  								
																if (this.canvas)  									
																		this.flip(1, -1);  								
																else if (this.filters)  									
																		this.filters[1].enabled = (y2d < 0) ? "true" : "false";  							
														}  							
														/* ==== fliph ==== */  							
														if ((x2d < 0) != this.px) {  								
																this.px = (x2d < 0);  								
																if (this.canvas)  									
																		this.flip(-1, 1);  								
																else if (this.filters)  									
																		this.filters[0].enabled = (x2d < 0) ? "true" : "false";  							
														}  						
												} else {  							
														/* ==== load image ==== */  							
														if ((this.canvas && this.img.complete) || this.complete) {  								
																this.loaded = true;  								
																if (this.canvas) {  									
																		this.w = this.img.width;  									
																		this.h = this.img.height;  									
																		this.width = this.w;  									
																		this.height = this.h;  									
																		var context = this.getContext("2d");  									
																		context.drawImage(this.img, 0, 0, this.w, this.h);  								
																}  							
														}  						
												}  					
										}  				
								}  			
						}  		
				}  		
				this.run();  	
		}  
}    
</script>  
</head>    
<body> 
<div id="screen"> 	
		<div id="b1"></div>  	
        <div id="b2"></div>     	
        <img alt="" src="imagenes/slide/1.jpg">	
        <img alt="" src="imagenes/slide/2.jpg"> 	
        <img alt="" src="imagenes/slide/3.jpg">  	
        <img alt="" src="imagenes/slide/4.jpg">  	
        <img alt="" src="imagenes/slide/5.jpg"> 	
        <img alt="" src="imagenes/slide/6.jpg">
        <div id="credit">script by <a href="http://www.dhteumeuleu.com/">wwww.dhteumeuleu.com</a>   -   digital images  oliver ottner: <a href="http://www.naturemorphosis.com/">www.naturemorphosis.com</a></div>  
</div>  
<script type="text/javascript">  	
		/* ==== start ==== */  	
		setTimeout(function() {  		
				car.init();  	
				}, 1000);  
</script>    
</body>
</html>
  #2 (permalink)  
Antiguo 25/07/2011, 13:44
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.933
Antigüedad: 9 años
Puntos: 1307
Respuesta: Galeria de Imgen (HTML- JavaScript)

En que navegador lo estás viendo? En ese navegador puedes ver el demo de la página que lo sacaste? No funciona nada o no ves la imágenes, o funciona a medias..

Saludos
__________________
Grupo Telegram Docker en Español
  #3 (permalink)  
Antiguo 25/07/2011, 14:20
 
Fecha de Ingreso: febrero-2007
Ubicación: Caracas
Mensajes: 148
Antigüedad: 10 años, 1 mes
Puntos: 6
Respuesta: Galeria de Imgen (HTML- JavaScript)

Cita:
Iniciado por Carlangueitor Ver Mensaje
En que navegador lo estás viendo? En ese navegador puedes ver el demo de la página que lo sacaste? No funciona nada o no ves la imágenes, o funciona a medias..

Saludos

Bueno estoy usando el mismo navegador tanto para ver el Demo y para ejecutar el codigo con mis modificaciones, que solo fueron la llamada a las imagenes, todo lo demas esta intacto.

Etiquetas: galeria, imgen
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:26.