[SOLUCIONADO] recorrer con js una galeria css

#1 (**permalink**) 29/04/2013, 05:54

Hola!
estoy haciendo una galería de imágenes online, puede verse en http://iki.es/betasite/
(Aqui os copio una version "reducida" del <body>)

Código HTML:

Ver original<body onLoad="clickMenu('galeria1')">
<header>
<a class="logo" href="contacto.html" title="galerioaonline">
  <img src="ikilogo.png">
</a>
<nav><ul>
      <li><a class="activo">Infografia</a>
      <li><a>Ilustracion</a></li>
      <li><a>Otros</a></li>
      <li><a>Contacto</a></li>
      <li><a>Enlaces</a></li>
    </ul></nav>
</header>
    <div class="infobar">
    </div>
    <div id="galeria1">
    <ul>
      <li><i><img src="01.jpg"/><span class="descripcion">texto1</span></i></li>
      <li><i><img src="02.jpg"/><span class="descripcion">texto2</span></i></li>
         ...
      <li>...</li
     </div>
     <div id="panel">
       <div id="wrapper">
        <a id="prev" onClick="retroceder('galeria1')"></a>
        <a id="next" onClick="avanzar('galeria1')"></a>
       </div>
     </div>
</body>

El sistema es muy sencillo, todas las imágenes están en una <li> a la que puedo asignar 3 clases "Off", "ampliar" o "".
Cuando la clase está vacía, se muestra las <li> como una galería.
Si se hace "click" sobre cualquier imagen, esta recibe la clase "ampliar" y se muestra a toda pantalla, mientras que las demas <li> reciben la clase "off" y desaparecen.

Todo ello funciona correctamente usando este mínimo JS que modifiqué:

Código Javascript:

Ver originalclickMenu = function(menu) {
  var getEls = document.getElementById(menu).getElementsByTagName("LI");
  var getAgn = getEls;
 
  for (var i=0; i<getEls.length; i++) {
          getEls[i].onclick=function() {
                if (this.className=='') {
                    for (var x=0; x<getAgn.length; x++) {
                          getAgn[x].className='off'}
                    this.className='ampliar'
                    ;return}
                else{for (var x=0; x<getAgn.length; x++) {
                          getAgn[x].className='';}}
              
              }
          }
      }

El asunto es que quiero hacer unos botones "anterior/siguiente" para navegar por las imágenes ampliadas, pero estoy empezando con el javascript y necesito algo de ayuda.

Lo que he hecho es coger el codigo anterior y modificarlo segun mis entendederas:

Código Javascript:

Ver originalavanzar = function(menu) {
  var getEls = document.getElementById(menu).getElementsByTagName("LI");
 
  for (var i=0; i<getEls.length; i++) {
                if (this.className=='ampliar') {this.className='off'
                  if (i==getEls.length){getEls[1].className='ampliar'}
                    else{ getEls[i+1].className='ampliar'}}
          }
      }
 
 
retroceder = function(menu) {
  var getEls = document.getElementById(menu).getElementsByTagName("LI");
  var total = getEls.length;
 
  for (var i=0; i<getEls.length; i++) {
                if (this.className=='ampliar') {this.className='off'
                  if (i==1){getEls[total].className='ampliar'}
                    else{ getEls[i-1].className='ampliar'}}
          }
      }

Pero claro, no funciona. Me preguntaba si alguien me podría orientar acerca de lo que estoy haciendo mal. La solución también me sirve, naturalmente, pero me conformaría con una indicación de lo que está mal, para seguir aprendiendo mientras lo resuelvo.

#2 (**permalink**) 01/05/2013, 06:04

Gracias a todos!