Alter Carousel Script for Next Previous

I'm trying to slightly alter the script found here, http://www.adrianhodge.com/web-design/mootools-horizontal-div-slider-121/.

What i want to do is make the carousel work on a Next/Previous feature versus a 1, 2, 3 method. I tried to do it myself but found i was was just going in circles and nothing was working. Any help is appreciated. I have listed below the only parts that should matter.

Javascript

<script language="Javascript">
<!--
function slideFolio(col){
	var x = ((col-1)*-505)
	var folioChange = new Fx.Tween('folio', {duration:2000});
	folioChange.start('left',x);
	var cur = "trigger"+col;
	$(cur).addClass('current');

	for (i=1;i<=8;i++){
		var loopLI = "trigger"+i;
		if (cur==loopLI){}else{
			$(loopLI).removeClass('current');
		}
	}
}
//-->
</script>

Code (markup):

HTML

<ul class="nums">
<li id="trigger1" class="current"><a href="javascript:slideFolio(1);" class="liinternal">1</a></li>
<li id="trigger2"><a href="javascript:slideFolio(2);" class="liinternal">2</a></li>
<li id="trigger3"><a href="javascript:slideFolio(3);" class="liinternal">3</a></li>
</ul>

Code (markup):

 

do not use inline javascript like a href="javascript:slideFolio(x)" - it is bad. as in, BAD bad. It creates circular references which result in memory leaks in IE.

anyway that aside. look at the html above. you are obviously building a list of known links for areas you pre-populate, possibly from a DB or just statics.

in mootools, you should try and do some pattern programming instead:

<ul class="nums">
<li id="trigger1" class="current"><a href="javascript:slideFolio(1);" class="liinternal">1</a></li>
<li id="trigger2"><a href="javascript:slideFolio(2);" class="liinternal">2</a></li>
<li id="trigger3"><a href="javascript:slideFolio(3);" class="liinternal">3</a></li>
</ul>

becomes:

<ul class="nums">
<li id="trigger1" class="current"><a href="#" class="liinternal">1</a></li>
<li id="trigger2"><a href="#" class="liinternal">2</a></li>
<li id="trigger3"><a href="#" class="liinternal">3</a></li>
</ul>

you can then access all links and assign the events via a single selector:
$$("a.liinternal").addEvents({
    "click": function() {
        var activeId = this.get("text").trim().toInt(); // gets the 1, 2, 3 4 etc.
        slideFolio(activeId);
    }
});

PHP:

this will improve the current code situation...

as for adding a next/previous, all you need are 2 elements like so (divs or li or whatever, just refer them by id):

<div id="previous">prev</div>
...
<div id="next">next</div>

... and something along the lines of this js within your domready (not tested):

$("previous").addEvent("click", function() {
    // get what the current one is. 
    var currentOne = document.getElement("li.current"), currentId = currentOne.getFirst().get("text").trim().toInt();
    
    if (currentId == 1)
        return false; // cant go any further.
    
    currentId--;
    slideFolio(currentId);
});

$("next").addEvent("click", function() {
    // get what the current one is. 
    var currentOne = document.getElement("li.current"), currentId = currentOne.getFirst().get("text").trim().toInt();
    
    // need to know the max number. for example, thats the maximum links we have or we can pre-fill from DB 
    var max = document.getElements("a.liinternal").length;
    
    if (currentId == max)
        return false; // cant go any further.
    
    currentId++;
    slideFolio(currentId);
});

PHP:

just be careful because since the advent of mootools 1.2 and the change of syntax to certain things like $E or $$, i have kept a number of shortcuts and using the defaults like getElements and getElement are not things i tend to do, sorry if the above triggers errors - check it in firebug and against the mootools manual, it should be fine.

for better mootools help, use the mootols mail group: http://groups.google.com/group/mootools-users?hl=en&pli=1

have fun and great choice of framework

 

wow. thanks much for your help.