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;
}


I have added this to the script

var pause = new Element('a',{
href: '#',
id: 'pause',
text: '||',
events: {
click: function(e) {
if(e) e.stop();
}
}
}).inject(container);


but it doesn’t quite work…

I also tried

var pause = new Element('a',{
href: '#',
id: 'pause',
text: '||',
events: {
click: function() { stop(); }
}
}).inject(container);


but this got rid of all my controls. Can anyone help?

Could the mootools here be tweaked to use a slide transition as opposed to fading?

Cheers.