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 Javascript :
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!!!
