Problema con scroll

epplestun · #1 (**permalink**) 23/04/2004, 05:00

Buenas, estoy haciendo una galeria de fotos via JavaScript y PHP, el problema que tengo esta en el Javascript, la idea es hacer una galeria con scroll horizontal, para lo cual tengo que calcular el final de la galeria, para ello cuento el numero de imagenes y lo multiplico por lo que ocupa cada una, asi tengo la anchura total, los calculos se hacen a partir de un punto, el 0, el caso es que no consigo que se pare la imagen donde quiero que se pare, es decir al final de la ultima imagen, es el tipico caso que desplazas en un cuadro el contenido hacia la izquierda y hacia la derecha, alguien sabe como calcular el punto final sk creo que lo estoy haciendo bien peor no me funciona.

Aqui dejo el codigo que tengo hasta ahora:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
	<head>
	<title>Galería fotográfica</title>
	<script language="JavaScript" type="text/javascript">
	if(document.getElementById) {  // si se trata de Netscape 6
		Refcapa   = 'document.getElementById("';
		Refestilo = '").style';
		Reftop    = '.top';
		Refleft   = '.left';
	} else if(document.layers) {  // si se trata de Netscape 4
		Refcapa   = 'document.';
		Refestilo = '',
		Reftop    = '.top';
		Refleft   = '.left';
	} else if(document.all) { // si se trata de Internet Explorer 4
		Refcapa   = '';
		Refestilo = '.style';
		Reftop    = '.pixelTop';
		Refleft   = '.pixelLeft';
	}
	
	var path      = "path";
	var imagenes  = new Array();
	imagenes[0]   = "imagen1.jpg";
	imagenes[1]   = "imagen2.jpg";
	imagenes[2]   = "imagen3.jpg";
	imagenes[3]   = "imagen4.jpg";
	imagenes[4]   = "imagen5.jpg";
	imagenes[5]   = "imagen6.jpg";
	imagenes[6]   = "imagen7.jpg";
	imagenes[7]   = "imagen8.jpg";
	imagenes[8]   = "imagen9.jpg";
	imagenes[9]   = "imagen10.jpg";
	imagenes[10]  = "imagen11.jpg";
	imagenes[11]  = "imagen12.jpg";
	imagenes[12]  = "imagen13.jpg";
	imagenes[13]  = "imagen14.jpg";
	imagenes[14]  = "imagen15.jpg";
	imagenes[15]  = "imagen16.jpg";
	imagenes[16]  = "imagen17.jpg";
	
	var pictures  = new Array();
	
	for(var w = 0; w < imagenes.length; w++) {
		eval("pictures[" + w + "] = new Image()");
		eval("pictures[" + w + "].src = " + "\"" + path + imagenes[w] + "\";");
	}
	
	var espacio      = 6;
	var ancho        = 60;
	var celda        = ancho + espacio;
	var anchuraTabla = 290;
	var velocidad    = 20;
	var anchuraTotal = ((pictures.length) * ancho) + (pictures.length * espacio);
	var fin          = anchuraTotal - anchuraTabla;
		
	var i = 0;
	
	function moverDerecha() {
		if(i < 0) {
			eval(Refcapa + 'capa' + Refestilo + Refleft + '=' + i++);
		}
	}
	
	function moverIzquierda() {
		if(i < fin) {
			eval(Refcapa + 'capa' + Refestilo + Refleft + '=' + i--);
		}
	}
	
	function stop() {
		clearInterval(tim);
	}
	
	function DJS_Derecha() {
		tim = setInterval("moverDerecha()", velocidad);
	}

	function DJS_Izquierda() {
		tim = setInterval("moverIzquierda()", velocidad);
	}
	
	function show(ob) {
		//alert(ob.src);
		var gPicture = document.getElementById('gPicture');
		gPicture.src = ob.src;
	}
	
	var imagenSize = anchuraTabla - 12; 
	document.write("<style type='text/css'> #arriba {position: relative; border: 1px solid #c0c0c0; width: " + anchuraTabla + "px; overflow: visible; height: 74px;} #capa {position:absolute; visibility: visible;} #tabla {width: " + anchuraTabla + "px}</style>");

	document.writeln("<table id='tabla' cellspacing='0' cellpadding='0' border='0'>");
	document.writeln("<table id='tabla' cellspacing='0' cellpadding='0' border='0'>");
	document.writeln("<tr>");
	document.writeln("<td style='padding-bottom: 5px'>");
	document.writeln("<table cellspacing='0' cellpadding='0' border='0' style='border: 1px solid #c0c0c0'>");
	document.writeln("<tr>");
	document.writeln("<td valign='middle' align='center'><img src='' id='gPicture' style='width: " + imagenSize + "px; height: " + imagenSize + "px'></td>");
	document.writeln("</tr>");
	document.writeln("</table>");
	document.writeln("</td>");
	document.writeln("</tr>");
	document.writeln("<tr>");
	document.writeln("<td>");
	document.writeln("<div id='arriba'>");
	document.writeln("<div id='capa'>");
	document.writeln("<table cellspacing='0' cellpadding='0' border='0'>");
	document.writeln("<tr>");
	
	for(var t = 0; t < pictures.length; t++) {
		document.writeln("<td width='" + celda + "' align='center'><img src='" + pictures[t].src + "' style='width: " + ancho + "px; height: " + ancho + "px; border: 1px solid #c0c0c0' onClick='show(this)' style='cursor: hand'></td>");
	}
	
	document.writeln("</tr>");
	document.writeln("</table>");
	document.writeln("</div>");
	document.writeln("</div>");
	document.writeln("<table cellspacing='0' cellpadding='0' border='0' id='tabla'>");
	document.writeln("<tr>");
	document.writeln("<td align='left'><a href='#' onMouseOver='DJS_Izquierda();' onMouseOut='stop();'>&lt; Anteriores</a></td>");
	document.writeln("<td align='right'><a href='#' onMouseOver='DJS_Derecha();' onMouseOut='stop();'>Siguientes &gt;</a></td>");
	document.writeln("</tr>");
	document.writeln("</table>");
	document.writeln("</td>");
	document.writeln("</tr>");
	document.writeln("</table>");
	</script>
	<style type="text/css">
	td {
		font-family     : verdana;
		font-size       : 10px;
		padding         : 5px;
	}
	
	a {
		color           : #808080;
		text-decoration : none;
	}
	
	a:hover {
		color           : #808080;
		text-decoration : none;
	}
	
	celda {
		text-align      : center;
	}
	</style>
	</head>
<body>
</body>

</html>