I don`t know mootools well, so can anyone help me to change the duration of the effect?

Thanks in advance!

I am trying to rewrite a simple version of this to support transitioning divs. This is sitting in Joomla 1.5 .22 (Using mootools. 1.2), and the divs in question are autogenerated via:

quote; ?>

name . ', '; ?>company; ?>

This is what I have:
(I have also tried var quotes = container.getElements(‘div.testimonial’);)


window.addEvent('domready',function() {
/* settings */
var showDuration = 3000;
var container = $('testimonial-slideshow');
var quotes = container.getElements('div');
var currentIndex = 0;
var interval;
/* opacity and fade */
quotes.each(function(div,i){
if(i > 0) {
div.set('opacity',0);
}
});
/* worker */
var show = function() {
quotes[currentIndex].fade('out');
quotes[currentIndex = currentIndex < quotes.length - 1 ? currentIndex+1 : 0].fade('in');
};
/* start once the page is finished loading */
window.addEvent('load',function(){
interval = show.periodical(showDuration);
});
});


Yet I get mootools.js error on line 38 , or with div.testimonial (as above) I get

return result;},getStyles:function(){r…hild);return this.appendText(text);}}

Can anyone see any obvious errors ? This is the very last part of a given task and I havent used mootols prior!

Cheer :)

var duration = 4000,
container = $(“slideshow”),
images = container.getElements(“img”),
currentIndex = 0,
interval;
images.each(function(img, i) {
if (i > 0) {
img.set(“opacity”, 0);
}
});

var show = function() {
images[currentIndex++].set(“tween”, {
duration: 2000
}).tween(“opacity”, 0);
images[currentIndex %= images.length].set(“tween”, {
duration: 2000
}).tween(“opacity”, 1);
}
show.periodical(duration);
}

Big up !

HTML:

1
2

CSS:

#slideshow {position:relative; height: 170px; width: 760px; overflow: hidden;}
#slideshow ul { margin: 0; padding: 0; }
#slideshow .slides li { opacity: 0; position: absolute; top: 0; left: 0; }
#slideshow .slides li.first { opacity: 1; }

#slideshow .controls { position: absolute; bottom: 4px; right:4px}
#slideshow .controls a {float: left; margin: 0 0 0 6px; padding: 1px 7px; background: #fff; list-style: none; }
#slideshow .controls a.active {background: #c0c0c0; }


MooTools JS:

/* Custom Mootools Slider */
window.addEvent('domready',function() {

/* settings */
var showDuration = 6000;
var wrap = $('slideshow');
var slides = wrap.getElements('ul.slides li');
var controls = wrap.getElements('div.controls a');
var currentIndex = 0;
var interval;

/* hide all but first slide */
slides.each(function(li,i){
if(i > 0) {
li.set('opacity',0);
}
});

/* updates controls */
var updateControls = function() {
if (controls !== false) {
//reset controls
controls.each(function(el){
el.removeClass('active');
});

controls.getParent().getElement('[rel=' + currentIndex + ']').addClass('active');
}
}

/* worker */
var show = function(index) {

slides[currentIndex].fade('out');

// show next slide automaticly or show selected slide
if(index == undefined){
slides[currentIndex = currentIndex < slides.length - 1 ? currentIndex+1 : 0].fade('in');
} else{
$clear(interval);

slides[index].fade('in');
currentIndex = index;

interval = show.periodical(showDuration);
}

updateControls();
};

/* start once the page is finished loading */
window.addEvent('load',function(){

interval = show.periodical(showDuration);

/* controls */
controls.addEvent('click', function(){
var rel = parseInt(this.rel,10);
show(rel);
return false;
});

updateControls();
});
});