Problemas con galeria mootools

[pabletein]

Buenas a todos
Esto del ajax me cuesta bastante y estoy teniendo un problema.
Dentro de un codigo bastante largo de una galeria de fotos con mootools tengo un listado de fotos, que son thumbs de lo que vendra despues.

Código HTML:

<li><a href="fotos/grandes/<?php echo $ultimaRevista;?>.jpg" id="first" class="item"> 
               <img class="thumb" alt="img" src="fotos/grandes/<?php echo $ultimaRevista;?>.jpg" width="150"/> 
                <span>VISITAR</span> 
            </a>   
                               
                </li> 

y tengo esto que hace que todo funcione

Código HTML:

window.addEvent('domready', function() { 
       
       
      // CHANGE THIS !! 
      var slides = 4;      // NUMBER OF SLIDES IN SLIDESHOW, CHANGE ACCORDINGLY 
       
      var pos = 0; 
      var offset = 480;   // HOW MUCH TO SLIDE WITH EACH CLICK 
      var currentslide = 1;   // CURRENT SLIDE IS THE FIRST SLIDE 
      var inspector = $('fullimg');   // WHERE THE LARGE IMAGES WILL BE PLACE    
      var fx = new Fx.Morph(inspector, {duration: 300, transition: Fx.Transitions.Sine.easeOut}); 
       var fx2 = new Fx.Morph(inspector, {duration: 200, transition: Fx.Transitions.Sine.easeOut}); 
 
       
      /* THUMBNAIL IMAGE SCROLL */ 
      var imgscroll = new Fx.Scroll('wrapper', { 
            offset: {'x': 0, 'y': 0}, 
            transition: Fx.Transitions.Cubic.easeOut   // HOW THE SCROLLER SCROLLS 
      }).toLeft(); 
 
    
      /* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */ 
      $('moveleft').addEvent('click', function(event) { event = new Event(event).stop(); 
         if(currentslide == 1) return; 
         currentslide--;               // CURRENT SLIDE IS ONE LESS 
         pos += -(offset);            // CHANGE SCROLL POSITION 
         imgscroll.start(pos);         // SCROLL TO NEW POSITION 
      }); 
      $('moveright').addEvent('click', function(event) { event = new Event(event).stop(); 
         if(currentslide >= slides) return; 
         currentslide++; 
         pos += offset; 
         imgscroll.start(pos); 
      }); 
       
      /* WHEN AN ITEM IS CLICKED, IT INSERTS THE IMAGE INTO THE FULL VIEW DIV */ 
      $$('.item').each(function(item){  
         item.addEvent('click', function(e) {  
            e = new Event(e).stop(); 
            fx2.start({  
               'opacity' : 0                                        
            }).chain(function(){ 
                
               inspector.empty();      // Empty Stage 
               var loadimg = 'images/ajax-loader.gif';      // Reference to load gif 
               var load = new Element('img', { 'src': loadimg, 'class': 'loading' }).inject(inspector);  
               fx2.start({ 'opacity' : 1 }); 
               var largeImage = new Element('img', { 'src': item.href }); // create large image 
                
               /* When the large image is loaded, fade out, fade in with new image */ 
               //largeImage.onload = function(){  // While this line of code causes the images to load/transition in smoothly, it cause IE to stop working 
                  fx.start({  
                     'opacity' : 0                                        
                  }).chain(function(){ 
                     inspector.empty();                          // empty stage 
                     var description = item.getElement('span');   // see if there is a description 
                      
                     if(description)                   
                        var des = new Element('p').set('text', description.getElement('text')).inject(inspector); 
                            
                     largeImage.inject(inspector); // insert new image 
                     fx.start({'opacity': 1});    // then bring opacity of elements back to visible             
                  }); 
               //}; 
                
            }); 
         }); 
      }); 
 
      // INSERT THE INITAL IMAGE - LIKE ABOVE 
      inspector.empty(); 
      var description = $('first').getElement('span'); 
      //if(description) var desc = new Element('p').setHTML(description.get('html')).inject(inspector); 
      if(description) var des = new Element('p').set('text', description.get('text')).inject(inspector); 
      var largeImage = new Element('img', {'src': $('first').href}).inject(inspector); 
       

Del cual, logicamente no entiendo mucho
la cosa es que <span>VISITAR</span> es la descripcion de cada revista y quisiera que esto sea un link ... pero increiblemente no estoy pudiendo. O sea, si puedo ponerselo .. pero al ponerselo, los lugares de las cosas no son los mismos .. la etiqueta < a > esta generando algun conflicto y no lo entinedo
alguien entiende algo de esto??
Necesitan un ejemplo?

Gracias!!!

[mayid]

Este tipo de selectores son muy puntuales:

var description = $('first').getElement('span');

Ahi se busca un span. Que si vos cambias por un <a> no es lo mismo para el script.

Fijate si te ayuda eso.

[mayid]

Seria bueno publiques el html, para saber como estan etiquetados los tags.

A que corresponde la clase "item", por ejemplo.
$$('.item').each(function(item){

que tambien aparece aqui:
item.getElement('span')