thats the best stuff in the web for mootools, very simple and absolutly great. Can You buiild this slideshow with controlls for the mobile device like iPad (potrait, landscape) and iPhone/Android (portrait, landscape) ?

but i just think that can we use this with carousel sytle? if yes, can you share for its too

Thanks

Thanks again!!

The line of code that appears to be the problem in Firefox is:

images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');

Is there any way to rewrite this code in a different way, even if it means using more lines of code? I think that might resolve the problem in Firefox.

The line of code that appears to be the problem in Firefox is:

images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');

Is there any way to rewrite this code in a different way, even if it means using more lines of code? I think that might resolve the problem in Firefox.

here is my contribution for PAUSE button, tested with MooTools core 1.2.5, not working with 1.3 :

JAVASCRIPT Part :

window.addEvent('domready',function() {
/* settings */
var showDuration = 3000;
var container = $('SlideShowPubs');
var images = container.getElements('img');
var currentIndex = 0;
var interval;
var toc = [];
var tocWidth = 20;
var tocActive = 'toc-active';
var playPause = false;

/* new: starts the show */
var start = function() {
interval = show.periodical(showDuration);
$('pause').set('text','||');
};

var stop = function() {
$clear(interval);
$('pause').set('text','>');
};

/* worker */
var show = function(to) {
images[currentIndex].fade('out');
toc[currentIndex].removeClass(tocActive);
images[currentIndex = ($defined(to) ? to : (currentIndex 0) { img.set('opacity',0); }
});

/* new: control: next, pause and previous */
var next = new Element('a',{
href: '#',
id: 'next',
text: '>>',
events: {
click: function(e) {
if(e) e.stop();
stop(); show();
}
}
}).inject(container);

var pause = new Element('a',{
href: '#',
id: 'pause',
text: '||',
events: {
click: function(e) {
if(e) {
// switch playPause to true or false depending on its previous state
playPause=!playPause;
// if TRUE then stop() slideshow, else start() (continue)
// TRUE means that user has clicked on the Pause button
playPause ? stop(): start();
}
}
}
}).inject(container);

var previous = new Element('a',{
href: '#',
id: 'previous',
text: '<<',
events: {
click: function(e) {
if(e) e.stop();
stop(); show(currentIndex != 0 ? currentIndex -1 : images.length-1);
}
}
}).inject(container);

/* new: control: start/stop on mouseover/mouseout */
/*container.addEvents({
mouseenter: function() { stop(); },
mouseleave: function() { start(); }
});*/

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


And don’t forget to put CSS part too :


#pause {
position: absolute;
bottom: 20px;
right: 70px;
z-index: 2;
display: block;
width: 20px;
background: #6D84B4;
color: #fff;
text-align: center;
padding: 3px;
text-decoration: none;
}