In “options”, find:


showDuration: 3000,


and replace with:


showDuration: 5000,
fadeDuration: 3000,


Then in “initialize”, find:


if(i > 0) el.set('opacity',0);


and replace with:


if(i > 0) el.set('opacity',0).setStyle('visibility', null);


now about fading transitions go in “show” function and find:


.fade('out');


and replace with:


.set('tween', {duration: this.options.fadeDuration}).tween('opacity', 1, 0);


then find:


.fade('in');


and replace with:


.set('tween', {duration: this.options.fadeDuration}).tween('opacity', 0, 1);


Then, the following part is optional, if you want the slideshow always running with mouse over (like i do), comment or remove this part:


this.container.addEvents({
mouseenter: function() { this.stop(); }.bind(this),
mouseleave: function() { this.start(); }.bind(this)
});


Doing so, you need to fix the buttons, adding this.start(); at the end of the click event. I show you in the following parts:


click: function(e) {
if(e) e.stop();
this.stop();
this.show(i);
this.start();
}.bind(this)


…then…


click: function(e) {
if(e) e.stop();
this.stop();
this.show();
this.start();
}.bind(this)


…and finally this…


click: function(e) {
if(e) e.stop();
this.stop();
this.show(this.currentIndex != 0 ? this.currentIndex -1 : this.elements.length-1);
this.start();
}.bind(this)


That’s all. Now i hope this code will show better… cross fingers ;).

I played around with Mootools and Firebug, finally i found a solution (tested and working in Firefox, Chrome, Safari, IE7). More tests are welcome.
Sadly i noticed that Mootools does not support the “duration” in the function fade(). More in detail: the fade(‘in’) function is working using the following code, but not the fade(‘out’):


.set('tween', {duration: 3000}).fade('in');


Fade out just ignores the duration of the tween, and the opacity goes to ’0′ in no time (i wonder why).
So i thought to skip both functions and do them from scratches, using the tweens to change “Opacity”. A 3 seconds of transition like this:


// instead of fade('out') i use this:
.set('tween', {duration: 3000}).tween('opacity', 1, 0);

//instead of fade('in') i use this:
.set('tween', {duration: 3000}).tween('opacity', 0, 1);


These are working but i found some issues again. In Firebug i can see that the styles of the images have “opacity” and “visibility” attributes, so we have the annoying “visibility:hidden” that is messing up things. Actually the tweens are not setting “visibility:visible”, so the images never show up.

So i fixed the behaviour modifying the code when David sets all images to “opacity:0″. I removed the visibility style, this way:


if(i > 0) el.set('opacity',0).setStyle('visibility', null);


I know it is not really smart to set both opacity and visibility, and then remove visibility, but this code is working for me.
So i finished the script adding my option “fadeDuration” together with the others, also, i added a start() function in the buttons, so the interval starts again after clicking (attention that in my code has little differences, i commented the “mouseenter” and “mouseleave” events, because i wanted the slideshow always running).

And here is the final code, enjoy:


var SimpleSlideshow = new Class({
options: {
showControls: true,
showDuration: 5000,
fadeDuration: 3000,
showTOC: true,
tocWidth: 20,
tocClass: 'toc',
tocActiveClass: 'toc-active'
},
Implements: [Options,Events],
initialize: function(container,elements,options) {
//settings
this.container = $(container);
this.elements = $$(elements);
this.currentIndex = 0;
this.interval = '';
if(this.options.showTOC) this.toc = [];

//assign
this.elements.each(function(el,i){
if(this.options.showTOC) {
this.toc.push(new Element('a',{
text: i+1,
href: '#',
'class': this.options.tocClass + '' + (i == 0 ? ' ' + this.options.tocActiveClass : ''),
events: {
click: function(e) {
if(e) e.stop();
this.stop();
this.show(i);
this.start();
}.bind(this)
},
styles: {
left: ((i + 1) * (this.options.tocWidth + 10))
}
}).inject(this.container));
}
if(i > 0) el.set('opacity',0).setStyle('visibility', null);
},this);

//next,previous links
if(this.options.showControls) {
this.createControls();

}
//events
this.container.addEvents({
//mouseenter: function() { this.stop(); }.bind(this),
//mouseleave: function() { this.start(); }.bind(this)
});

},
show: function(to) {
this.elements[this.currentIndex].set('tween', {duration: this.options.fadeDuration}).tween('opacity', 1, 0);
if(this.options.showTOC) this.toc[this.currentIndex].removeClass(this.options.tocActiveClass);
this.elements[this.currentIndex = ($defined(to) ? to : (this.currentIndex >',
events: {
click: function(e) {
if(e) e.stop();
this.stop();
this.show();
this.start();
}.bind(this)
}
}).inject(this.container);
var previous = new Element('a',{
href: '#',
id: 'previous',
text: '<<',
events: {
click: function(e) {
if(e) e.stop();
this.stop();
this.show(this.currentIndex != 0 ? this.currentIndex -1 : this.elements.length-1);
this.start();
}.bind(this)
}
}).inject(this.container);
}
});

Part 2 and Part 3 examples do not seem to be working IE9 and running IE tester left a lot errors also. Any plans on fixing this to work cross platform?

Part 1 worked fine in IE.

After reading all 3 sections & the comments it seems like many people are requesting duration controls for the speed of the fade in/out function. I think it would be a nice addition to your fantastic tutorial.

Thank you David.

I love this code….so flexible and powerful! Thanks a ton.

These slideshow tutorials rock.