Foros del Web » Programando para Internet » Javascript »

problemas con un slideshow manual

 Estas en el tema de problemas con un slideshow manual en el foro de Javascript en Foros del Web. Saludos, tengo este código con el que estoy intentando hacer una galeria manual, usa una capa div que se mueve. Pues bien el problema está ...
  #1 (permalink)  
Antiguo 16/07/2004, 18:00
Avatar de Eztopa  
Fecha de Ingreso: diciembre-2002
Ubicación: En todas partes
Mensajes: 135
Antigüedad: 22 años
Puntos: 0
problemas con un slideshow manual
Saludos, tengo este código con el que estoy intentando hacer una galeria manual, usa una capa div que se mueve. Pues bien el problema está en que cuando se acaba la capa se puede continuar pulsando el boton de avanzar, y yo necesito que se pare cuando la capa se acabe, igual tb con el boton retroceder.

Código: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-color: #0066CC;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function P7AniMagic(el, x, y, a, b, c, s) { //v2.5 PVII
 var g,elo=el,f="",m=false,d="";x=parseInt(x);y=parseInt(y);
 var t = 'g.p7Magic = setTimeout("P7AniMagic(\''+elo+'\','; 
 if ((g=MM_findObj(el))!=null) {d=(document.layers)?g:g.style;}else{return;}
 if (parseInt(s)>0) {eval(t+x+','+y+','+a+','+b+','+c+',0)",' + s+')');return;}
 var xx=(parseInt(d.left))?parseInt(d.left):0;
 var yy=(parseInt(d.top))?parseInt(d.top):0;
 if(parseInt(c)==1) {x+=xx;y+=yy;m=true;c=0;}
 else if (c==2) {m=false;clearTimeout(g.p7Magic);}
 else {var i=parseInt(a);
  if (eval(g.moved)){clearTimeout(g.p7Magic);}
  if (xx<x){xx+=i;m=true;if(xx>x){xx=x;}}
  if (xx>x){xx-=i;m=true;if(xx<x){xx=x;}}
  if (yy<y){yy+=i;m=true;if(yy>y){yy=y;}}
  if (yy>y){yy-=i;m=true;if(yy<y){yy=y;}}}
 if (m) {if((navigator.appName=="Netscape") && parseInt(navigator.appVersion)>4){
    xx+="px";yy+="px";}
  d.left=xx;d.top=yy;g.moved=true;eval(t+x+','+y+','+a+','+b+','+c+',0)",'+b+')');
  }else {g.moved=false;}
}
//-->
</script>
</head>

<body>
<img src="retrocede.jpg" width="121" height="39" onClick="P7AniMagic('Layer1',348,0,20,1,1,0)">
<img src="avanza.jpg" width="108" height="33" onClick="P7AniMagic('Layer1',-348,0,20,1,1,0)">
<div id="Layer2" style="position:relative; left:52px; top:74px; width:348px; height:180px; z-index:2; overflow: hidden;"><div id="Layer1" style="position:relative; left:0; top:0; width:1000; height:230; z-index:3">
  <table width="50" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><img src="previews/1.jpg" width="348" height="180"></td>
      <td><img src="previews/2.jpg" width="348" height="180"></td>
      <td><img src="previews/3.jpg" width="348" height="180"></td>
    </tr>
  </table>
  </div>
</div>

</body>
</html>
__________________
Cool BOTIJO POWER!!!
Diseño Web
http://www.coolbotijo.net/coolbotijo1.gif
  #2 (permalink)  
Antiguo 19/07/2004, 06:43
Avatar de Eztopa  
Fecha de Ingreso: diciembre-2002
Ubicación: En todas partes
Mensajes: 135
Antigüedad: 22 años
Puntos: 0
¿Nadie sabe como ayudarme?

Ayuda por favor, tunait? karlankas? caricatos?
__________________
Cool BOTIJO POWER!!!
Diseño Web
http://www.coolbotijo.net/coolbotijo1.gif
  #3 (permalink)  
Antiguo 19/07/2004, 11:19
Avatar de Eztopa  
Fecha de Ingreso: diciembre-2002
Ubicación: En todas partes
Mensajes: 135
Antigüedad: 22 años
Puntos: 0
Bueno si encontráis algun efecto parecido tambien me serviría...
__________________
Cool BOTIJO POWER!!!
Diseño Web
http://www.coolbotijo.net/coolbotijo1.gif
  #4 (permalink)  
Antiguo 20/07/2004, 15:33
Avatar de Eztopa  
Fecha de Ingreso: diciembre-2002
Ubicación: En todas partes
Mensajes: 135
Antigüedad: 22 años
Puntos: 0
Ha leido alguien este post? hay que ver que solo me siento a veces....
__________________
Cool BOTIJO POWER!!!
Diseño Web
http://www.coolbotijo.net/coolbotijo1.gif
  #5 (permalink)  
Antiguo 21/07/2004, 04:08
 
Fecha de Ingreso: octubre-2003
Mensajes: 40
Antigüedad: 21 años, 2 meses
Puntos: 0
Que no estas solo hombre!!
Añade esto :

....
....
nImg=3-1//Numero de imagenes-1
wImg=348 //Ancho Imagenes
if ((parseInt(xx)<=0)&&(parseInt(xx)>=-(nImg*wImg))){
d.left=xx;d.top=yy;g.moved=true;
eval(t+x+','+y+','+a+','+b+','+c+',0)",'+b+')');
}
...
...


Quedaría más elegante si los valores de las variables los asignas automáticamente.

nImg=document.getElementById("tabla1").cells.lengt h-1//Numero de imagenes-1 *Solo para IE
wImg=document.getElementById("img1").width //Ancho Imagenes

Asignando previamente los id "tabla1" a la tabla, e "img1" a la primera imagen.

Suerte

rsalvadores
  #6 (permalink)  
Antiguo 21/07/2004, 08:40
Avatar de Eztopa  
Fecha de Ingreso: diciembre-2002
Ubicación: En todas partes
Mensajes: 135
Antigüedad: 22 años
Puntos: 0
Muchísimas gracias rsalvadores por responder, ya creía que nadie me escuchaba . Sin embargo el código que mandas no me funciona , mira así es como lo pongo, puede que el problema sea que yo no sé añadirlo, es que soy algo torpe con javascript.

Código: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-color: #0066CC;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function P7AniMagic(el, x, y, a, b, c, s) { //v2.5 PVII
 var g,elo=el,f="",m=false,d="";x=parseInt(x);y=parseInt(y);
 var t = 'g.p7Magic = setTimeout("P7AniMagic(\''+elo+'\','; 
 if ((g=MM_findObj(el))!=null) {d=(document.layers)?g:g.style;}else{return;}
 if (parseInt(s)>0) {eval(t+x+','+y+','+a+','+b+','+c+',0)",' + s+')');return;}
 var xx=(parseInt(d.left))?parseInt(d.left):0;
 var yy=(parseInt(d.top))?parseInt(d.top):0;
 if(parseInt(c)==1) {x+=xx;y+=yy;m=true;c=0;}
 else if (c==2) {m=false;clearTimeout(g.p7Magic);}
 else {var i=parseInt(a);
  if (eval(g.moved)){clearTimeout(g.p7Magic);}
  if (xx<x){xx+=i;m=true;if(xx>x){xx=x;}}
  if (xx>x){xx-=i;m=true;if(xx<x){xx=x;}}
  if (yy<y){yy+=i;m=true;if(yy>y){yy=y;}}
  if (yy>y){yy-=i;m=true;if(yy<y){yy=y;}}}
 if (m) {if((navigator.appName=="Netscape") && parseInt(navigator.appVersion)>4){
    xx+="px";yy+="px";}
  d.left=xx;d.top=yy;g.moved=true;eval(t+x+','+y+','+a+','+b+','+c+',0)",'+b+')');
  }else {g.moved=false;}
}
nImg=3-1//Numero de imagenes-1
wImg=348 //Ancho Imagenes
if ((parseInt(xx)<=0)&&(parseInt(xx)>=-(nImg*wImg))){
d.left=xx;d.top=yy;g.moved=true;
eval(t+x+','+y+','+a+','+b+','+c+',0)",'+b+')');
}
//-->
</script>
</head>

<body>
<img src="retrocede.jpg" width="121" height="39" onClick="P7AniMagic('Layer1',348,0,20,1,1,0)">
<img src="avanza.jpg" width="108" height="33" onClick="P7AniMagic('Layer1',-348,0,20,1,1,0)">
<div id="Layer2" style="position:relative; left:52px; top:74px; width:348px; height:180px; z-index:2; overflow: hidden;"><div id="Layer1" style="position:relative; left:0; top:0; width:1000; height:230; z-index:3">
  <table width="50" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><img src="previews/1.jpg" width="348" height="180"></td>
      <td><img src="previews/2.jpg" width="348" height="180"></td>
      <td><img src="previews/3.jpg" width="348" height="180"></td>
    </tr>
  </table>
  </div>
</div>
</body>
</html>
__________________
Cool BOTIJO POWER!!!
Diseño Web
http://www.coolbotijo.net/coolbotijo1.gif
  #7 (permalink)  
Antiguo 21/07/2004, 08:48
 
Fecha de Ingreso: octubre-2003
Mensajes: 40
Antigüedad: 21 años, 2 meses
Puntos: 0
Solo hay que modificar la funcion P7AniMagic.

quedaria asi:

function P7AniMagic(el, x, y, a, b, c, s) { //v2.5 PVII
var g,elo=el,f="",m=false,d="";x=parseInt(x);y=parseIn t(y);
var t = 'g.p7Magic = setTimeout("P7AniMagic(\''+elo+'\',';
if ((g=MM_findObj(el))!=null) {d=(document.layers)?g:g.style;}else{return;}
if (parseInt(s)>0) {eval(t+x+','+y+','+a+','+b+','+c+',0)",' + s+')');return;}
var xx=(parseInt(d.left))?parseInt(d.left):0;
var yy=(parseInt(d.top))?parseInt(d.top):0;
if(parseInt(c)==1) {x+=xx;y+=yy;m=true;c=0;}
else if (c==2) {m=false;clearTimeout(g.p7Magic);}
else {var i=parseInt(a);
if (eval(g.moved)){clearTimeout(g.p7Magic);}
if (xx<x){xx+=i;m=true;if(xx>x){xx=x;}}
if (xx>x){xx-=i;m=true;if(xx<x){xx=x;}}
if (yy<y){yy+=i;m=true;if(yy>y){yy=y;}}
if (yy>y){yy-=i;m=true;if(yy<y){yy=y;}}}
if (m) {
if((navigator.appName=="Netscape") && parseInt(navigator.appVersion)>4){
xx+="px";yy+="px";
}
nImg=3-1//Numero de imagenes-1
wImg=348 //Ancho Imagenes
if ((parseInt(xx)<=0)&&(parseInt(xx)>=-(nImg*wImg))){
d.left=xx;d.top=yy;g.moved=true;
eval(t+x+','+y+','+a+','+b+','+c+',0)",'+b+')');
}
}else {g.moved=false;}
}

suerte

rsalvadores
  #8 (permalink)  
Antiguo 21/07/2004, 11:56
Avatar de Eztopa  
Fecha de Ingreso: diciembre-2002
Ubicación: En todas partes
Mensajes: 135
Antigüedad: 22 años
Puntos: 0
Efectivamente me funciona pero tengo un problema cuando uso varias capas con distinto numero de imagenes al mismo tiempo, porque uso un numero distinto de imagenes y el script utiliza un numero fijo para todas.
__________________
Cool BOTIJO POWER!!!
Diseño Web
http://www.coolbotijo.net/coolbotijo1.gif
  #9 (permalink)  
Antiguo 22/07/2004, 02:33
 
Fecha de Ingreso: octubre-2003
Mensajes: 40
Antigüedad: 21 años, 2 meses
Puntos: 0
No te entiendo muy bien, quieres decir que tienes diferentes tiras, con distinto numero de imagenes? pero no puedes controlar las tiras con los mismos botones "atras" "adelante", o como indicas a que tira de imagenes te refieres?

Creo que se me escapa algo, intenta explicarlo más detalladamente cuantas tiras de imagenes, cuantos controladores...
  #10 (permalink)  
Antiguo 22/07/2004, 02:52
Avatar de Eztopa  
Fecha de Ingreso: diciembre-2002
Ubicación: En todas partes
Mensajes: 135
Antigüedad: 22 años
Puntos: 0
Tienes razon no me he explicado bien. Tengo 4 tiras de imagenes y un numero diferente de imagenes en cada tira, por ejemplo en una tengo 14 imagenes, en otra tengo 11 en otra 12 y en otra 18, y naturalmente tengo 8 botones, 4 botones adelante y cuatro atras para controlar cada tira por separado.
__________________
Cool BOTIJO POWER!!!
Diseño Web
http://www.coolbotijo.net/coolbotijo1.gif
  #11 (permalink)  
Antiguo 22/07/2004, 05:30
 
Fecha de Ingreso: octubre-2003
Mensajes: 40
Antigüedad: 21 años, 2 meses
Puntos: 0
Te mando un ejemplo con dos tiras de imagenes con diferente ancho, despues puedes poner todas las tiras que quieras.

He añadido dos nuevos parametros a la función:

P7AniMagic(el, x, y, a, b, c, s, nI,wI)
P7AniMagic('Layer21',50,0,20,1,1,0,3,50)"

nI Numero de images de la tira -1
wI Ancho de las imagenes de esa tira

cuando varias el ancho debes cambiarlo tambien, en el layer que contiene la tira:
<div id="Layer2" style="position:relative; left:52px; top:0px; width:50px; height:50px; z-index:2; overflow: hidden;">

y en el evento onClick de los botones:
onClick="P7AniMagic('Layer21',50,0,20,1,1,0,3,50)"
onClick="P7AniMagic('Layer21',-50 ,0,20,1,1,0,3,50)

Hay va el ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #0066CC;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function P7AniMagic(el, x, y, a, b, c, s, nI,wI) { //v2.5 PVII
var g,elo=el,f="",m=false,d="";x=parseInt(x);y=parseIn t(y);
var t = 'g.p7Magic = setTimeout("P7AniMagic(\''+elo+'\',';
if ((g=MM_findObj(el))!=null) {d=(document.layers)?g:g.style;}else{return;}
if (parseInt(s)>0) {eval(t+x+','+y+','+a+','+b+','+c+',0)",' + s+')');return;}
var xx=(parseInt(d.left))?parseInt(d.left):0;
var yy=(parseInt(d.top))?parseInt(d.top):0;
if(parseInt(c)==1) {x+=xx;y+=yy;m=true;c=0;}
else if (c==2) {m=false;clearTimeout(g.p7Magic);}
else {var i=parseInt(a);
if (eval(g.moved)){clearTimeout(g.p7Magic);}
if (xx<x){xx+=i;m=true;if(xx>x){xx=x;}}
if (xx>x){xx-=i;m=true;if(xx<x){xx=x;}}
if (yy<y){yy+=i;m=true;if(yy>y){yy=y;}}
if (yy>y){yy-=i;m=true;if(yy<y){yy=y;}}}
if (m) {
if((navigator.appName=="Netscape") && parseInt(navigator.appVersion)>4){
xx+="px";yy+="px";
}
nImg=nI
wImg=wI
if ((parseInt(xx)<=0)&&(parseInt(xx)>=-((nImg)*wImg))){
d.left=xx;d.top=yy;g.moved=true;
eval(t+x+','+y+','+a+','+b+','+c+',0,'+nImg+','+wI mg+')",'+b+')');
}
}else {g.moved=false;}
}

//-->
</script>
</head>

<body>
<img src="../Images/ZoomLeft.gif" width="16" height="16" onClick="P7AniMagic('Layer11',100,0,20,1,1,0,4,100 )"> <!-- añadido 4,100 4=numero images -1, 100=ancho images-->
<img src="../Images/ZoomRight.gif" width="16" height="16" onClick="P7AniMagic('Layer11',-100,0,20,1,1,0,4,100)"> <!-- añadido 4,100 4=numero images -1, 100=ancho images-->
<div id="Layer1" style="position:relative; left:52px; top:0px; width:100px; height:50px; z-index:2; overflow: hidden;">
<div id="Layer11" style="position:relative; left:0; top:0; width:1000; height:230; z-index:3">
<table id="tabla1" width="50" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="Images/1.jpg" width="100" height="50"></td>
<td><img src="Images/2.jpg" width="100" height="50"></td>
<td><img src="Images/3.jpg" width="100" height="50"></td>
<td><img src="Images/4.jpg" width="100" height="50"></td>
<td><img src="Images/5.jpg" width="100" height="50"></td>
</tr>
</table>
</div>
</div>
<img src="../Images/ZoomLeft.gif" width="16" height="16" onClick="P7AniMagic('Layer21',50,0,20,1,1,0,3,50)" > <!-- añadido "3,50" 3=numero images -1, 50=ancho images-->
<img src="../Images/ZoomRight.gif" width="16" height="16" onClick="P7AniMagic('Layer21',-50,0,20,1,1,0,3,50)"> <!-- añadido "3,50" 3=numero images -1, 50=ancho images-->
<div id="Layer2" style="position:relative; left:52px; top:0px; width:50px; height:50px; z-index:2; overflow: hidden;"> <!-- width=50=ancho images-->
<div id="Layer21" style="position:relative; left:0; top:0; width:1000; height:230; z-index:3">
<table id="tabla1" width="50" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="Images/1.jpg" width="50" height="50"></td>
<td><img src="Images/2.jpg" width="50" height="50"></td>
<td><img src="Images/3.jpg" width="50" height="50"></td>
<td><img src="Images/4.jpg" width="50" height="50"></td>
</tr>
</table>
</div>
</div>
</body>
</html>

Ya me contarás

rsalvadores
  #12 (permalink)  
Antiguo 22/07/2004, 07:01
Avatar de Eztopa  
Fecha de Ingreso: diciembre-2002
Ubicación: En todas partes
Mensajes: 135
Antigüedad: 22 años
Puntos: 0
rsalvadores no me funciona :( has probado ese código y te funciona a ti? uso internet explorer.
__________________
Cool BOTIJO POWER!!!
Diseño Web
http://www.coolbotijo.net/coolbotijo1.gif
  #13 (permalink)  
Antiguo 22/07/2004, 08:47
 
Fecha de Ingreso: octubre-2003
Mensajes: 40
Antigüedad: 21 años, 2 meses
Puntos: 0
Perdona, hay un error en esta linea:

eval(t+x+','+y+','+a+','+b+','+c+',0,'+nImg+','+wI mg+')",'+b+')');

realmente es así:

eval(t+x+','+y+','+a+','+b+','+c+',0,'+nImg+','+wImg+')",'+b+')');

sorry
  #14 (permalink)  
Antiguo 22/07/2004, 08:59
Avatar de Eztopa  
Fecha de Ingreso: diciembre-2002
Ubicación: En todas partes
Mensajes: 135
Antigüedad: 22 años
Puntos: 0
Ves por eso la programación se me da mal, porque una coma menos y ya nada funciona :).

Me funciona a la perfección!! Muchas gracias rsalvadores cuando tenga la web terminada te la mando para que la veas y me des tu opinión, por cierto de donde eres? lo digo pa invitarte a algo cuando te vea :)

Que erez una maquinaz!!!
__________________
Cool BOTIJO POWER!!!
Diseño Web
http://www.coolbotijo.net/coolbotijo1.gif
  #15 (permalink)  
Antiguo 22/07/2004, 09:16
 
Fecha de Ingreso: octubre-2003
Mensajes: 40
Antigüedad: 21 años, 2 meses
Puntos: 0
Me parece perfecto (lo de invitarme a algo) .

Soy de Madrid, pero con disponibilidad de desplazamiento si la invitación así lo requiere .

hasta otra.
  #16 (permalink)  
Antiguo 22/07/2004, 09:42
Avatar de Eztopa  
Fecha de Ingreso: diciembre-2002
Ubicación: En todas partes
Mensajes: 135
Antigüedad: 22 años
Puntos: 0
Jajaja pues nada ya sabes que tienes un amigo en Sevilla para lo que quieras, cuando llegues aqui te van a hacer falta muchas cervezas fresquitas. :)
__________________
Cool BOTIJO POWER!!!
Diseño Web
http://www.coolbotijo.net/coolbotijo1.gif
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

SíEste tema le ha gustado a 1 personas


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:38.