JAVASCRIPT
Código :
posActual = 0; running = false; function slide(id){ number = (parseInt(id,10)*550)*-1; if(running == true){ clearInterval(interval); } if(number > posActual){ running = true; interval = setInterval(moverFotogaleriaIzquierda,20,number); }else if(number < posActual){ running = true; interval = setInterval(moverFotogaleriaDerecha,20,number); } } function moverFotogaleriaDerecha(posFinal){ pos = Math.floor((posFinal-posActual)/5); posActual+=pos; if(posActual <= posFinal){ clearInterval(interval); posActual = posFinal; running = false; } document.getElementById('fotos').style.left = posActual+'px'; } function moverFotogaleriaIzquierda(posFinal){ pos = Math.ceil((posFinal-posActual)/5); posActual+=pos; if(posActual >= posFinal){ clearInterval(interval); posActual = posFinal; running = false; } document.getElementById('fotos').style.left = posActual+'px'; }
El código funciona super bien en FF y en Chrome pero IE 8 (para variar) no jala y me marca un error en la línea: document.getElementById('fotos').style.left = posActual+'px';
El CSS es:
Código :
#fotogaleria #indiceFotos{ width:550px; height:10px; margin:0 auto 0 auto; padding:10px 0 10px 0; } #fotogaleria #indiceFotos img{ background-image:url(images/iconFotogaleriaOff.gif); background-repeat:no-repeat; cursor:pointer; } #fotogaleria #indiceFotos img.selected, #fotogaleria #indiceFotos img:hover{ background-image:url(images/iconFotogaleria.gif); background-repeat:no-repeat; } #fotogaleria #maskFotogaleria{ width:550px; height:375px; margin:0 auto 0 auto; overflow:hidden; } #fotogaleria #fotos{ width:5500px; height:375px; position:relative; left:0; } #fotogaleria #fotos .foto{ width:550px; height:375px; float:left; color:#FFF; overflow:hidden; } #fotogaleria #fotos .foto img{ display:block; margin:0 auto 0 auto; } #fotogaleria #fotos .foto h2{ color:#FFF; font-size:24px; font-weight:normal; padding:5px 0 5px 0; } #fotogaleria #fotos .foto .excerpt p{ width:550px; color:#FFF; }
y el HTML es:
Código :
<div id="fotogaleria"> <div id="indiceFotos"> <? for($i=0;$i<10;$i++){ ?> <img onclick="slide('<? print $i; ?>');" src="/images/px.png" width="10" height="10" /> <? } ?> </div> <div id="maskFotogaleria"> <div id="fotos"> <? $myposts = get_posts('numberposts=10&category_name=fotogaleria'); foreach($myposts as $post): setup_postdata($post); ?> <div class="foto"> <h2><? the_title(); ?></h2> <? $imagen = get_post_custom_values('imagen', $post->ID);?> <img src="<? print $imagen[0]; ?>" width="472" height="276" /> <div class="excerpt"><? the_excerpt(); ?></div> </div> <? endforeach; ?> </div> </div> </div>
Alguien tiene una idea??? La vdd ya no sé que hacer...