problema con galeria de javascript

fenix0224 · #1 (**permalink**) 05/03/2009, 11:37

hola encontre un codigo que usando javascript y hojas de estilo crean un pase de diapositivas pero al implementarlo me sale un eero en la consola de errores del firfox me sale que no esta definico xClip apesar de que he incluido

el codigo es el siguiente

Código:

<html>

<head>
<style type="text/css">
.estilocapa {position:absolute; left:50px; top:80px; visibility:visible; clip: rect(0,155,0,0);}
</style>

<script type='text/javascript' src='../x/x_core.js'></script> 

<script type='text/javascript'>
velocidad = 10

clip_top = 0
clip_right = 155
clip_bottom = 0
clip_left = 0
maximo_clip_bottom = 80
contador_zindex = 0

capas_images = new Array("c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9") 
imagen_actual = 0

function cortina(){ 
    clip_bottom += 1 
    if (clip_bottom==maximo_clip_bottom){ 
       clip_bottom = 0 
       imagen_actual += 1 
       if (imagen_actual == capas_images.length){ 
          imagen_actual=0 
       } 
       xZIndex(capas_images[imagen_actual],contador_zindex) 
       contador_zindex ++ 
    } 
    xClip (capas_images[imagen_actual], clip_top, clip_right, clip_bottom, clip_left) 
    setTimeout("cortina()",velocidad) 
}
</script>



</head>




<body onload="cortina()">
<div id="c1" class=estilocapa> 
<img src="00.jpg" width="520" height="350" border="0"> 
</div> 
<div id="c2" class=estilocapa> 
<img src="01.jpg" width="520" height="350" alt="" border="0"> 
</div> 
<div id="c3" class=estilocapa> 
<img src="02.jpg" width="520" height="350" alt="" border="0"> 
</div> 
<div id="c4" class=estilocapa> 
<img src="03.jpg" width="520" height="350" alt="" border="0"> 
</div> 
<div id="c5" class=estilocapa> 
<img src="04.jpg" width="520" height="350" alt="" border="0"> 
</div> 
<div id="c6" class=estilocapa> 
<img src="05.jpg" width="520" height="350" alt="" border="0"> 
</div> 
<div id="c7" class=estilocapa> 
<img src="06.jpg" width="520" height="350" alt="" border="0"> 
</div> 
<div id="c8" class=estilocapa> 
<img src="07.jpg" width="520" height="350" alt="" border="0"> 
</div> 
<div id="c9" class=estilocapa> 
<img src="08.jpg" width="520" height="350" alt="" border="0"> 
</div> 

</body>


</html>

me podrian decir porfa donde esta el error o sino es mucha molestia otrop codigo que genere el efecto de pase de diapositivas con javascript

jeybi · #2 (**permalink**) 05/03/2009, 11:44

Exactamente donde defines xClip? En el codigo que posteas no lo veo por ningun lado. Podrias postear el x_core para echarle un vistazo?

fenix0224 · #3 (**permalink**) 05/03/2009, 16:37

pues encontre el error enla nueva version de cross-browser.com habian quitado las funciones que necesitaba para esta galeria del archivo x_core.js si alguien quiere crear una galeria similar les dejo el codigo corregido y el x_core.js con la funciones que necesitamos para que corra la galeria

Código:

<html>

<head>
<style type="text/css">
.estilocapa {position:absolute; left:50px; top:80px; visibility:visible; clip: rect(0,155,0,0);}
</style>

<script type='text/javascript' src='x_core.js'></script> 

<script type='text/javascript'>
velocidad = 20
//155
clip_top = 0
clip_right = 155
clip_bottom = 0
clip_left = 0
maximo_clip_bottom = 80
contador_zindex = 0

capas_images = new Array("c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9") 
imagen_actual = 0

function cortina(){ 
    clip_bottom += 1 
    if (clip_bottom==maximo_clip_bottom){ 
       clip_bottom = 0 
       imagen_actual += 1 
       if (imagen_actual == capas_images.length){ 
          imagen_actual=0 
       } 
       xZIndex(capas_images[imagen_actual],contador_zindex) 
       contador_zindex ++ 
    } 
    xClip (capas_images[imagen_actual], clip_top, clip_right, clip_bottom, clip_left) 
    setTimeout("cortina()",velocidad) 
}
</script>



</head>




<body onload="cortina()">
<div id="c1" class=estilocapa> 
<img src="00.jpg" width="520" height="350" border="0"> 
</div> 
<div id="c2" class=estilocapa> 
<img src="01.jpg" width="520" height="350" alt="" border="0"> 
</div> 
<div id="c3" class=estilocapa> 
<img src="02.jpg" width="520" height="350" alt="" border="0"> 
</div> 
<div id="c4" class=estilocapa> 
<img src="03.jpg" width="520" height="350" alt="" border="0"> 
</div> 
<div id="c5" class=estilocapa> 
<img src="04.jpg" width="520" height="350" alt="" border="0"> 
</div> 
<div id="c6" class=estilocapa> 
<img src="05.jpg" width="520" height="350" alt="" border="0"> 
</div> 
<div id="c7" class=estilocapa> 
<img src="06.jpg" width="520" height="350" alt="" border="0"> 
</div> 
<div id="c8" class=estilocapa> 
<img src="07.jpg" width="520" height="350" alt="" border="0"> 
</div> 
<div id="c9" class=estilocapa> 
<img src="08.jpg" width="520" height="350" alt="" border="0"> 
</div> 

</body>


</html>

y el x_core.js modificado es
solo agreguen al x_core.js el siguiente codigo y funcionara

Código:


function xClip(e,t,r,b,l)
{
  if(!(e=xGetElementById(e))) return;
  if(e.style) {
    if (xNum(l)) e.style.clip='rect('+t+'px '+r+'px '+b+'px '+l+'px)';
    else e.style.clip='rect(0 '+parseInt(e.style.width)+'px '+parseInt(e.style.height)+'px 0)';
  }
}

// xZIndex r1, Copyright 2001-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL

function xZIndex(e,uZ)
{
  if(!(e=xGetElementById(e))) return 0;
  if(e.style && xDef(e.style.zIndex)) {
    if(xNum(uZ)) e.style.zIndex=uZ;
    uZ=parseInt(e.style.zIndex);
  }
  return uZ;
}

ups disculpen por las muchas lineas XD aya el codigo lo saque de http://www.desarrolloweb.com/articulos/1819.php
aqui tb pueden ver como funciona la galeria aya el el archivo .js lo podran descargar de cross-browser.com