An effect for jquery tools slideshow
This work never ended up being further developed into production (and it is one of my first attempt at coding stuff in Javascript, so there may be misunderstandings of the language).
It gives a transition where the next slide comes in from the right.
A lot of the code taken from here.
var currentPane;
var w;
var a;
var b;
var newPane;
var firstRun;
$.tools.tabs.addEffect("horizontalslider", function(i, done) {
if (typeof this.getIndex() == 'undefined') {
firstRun = true
}
else {
firstRun = false;
}
currentPane = (typeof this.getIndex() == 'undefined') ? this.getPanes().eq(0) : this.getCurrentPane();
w = this.getPanes().eq(0).width();
a = 0;
b = w;
currentPane.css({"z-index":"0"});
//alert(currentPane.css('z-index'));
// expand the other panel
newPane = this.getPanes().eq(i);
newPane.css({"z-index":"1"});
newPane.css({left: b});
newPane.show();
if (firstRun){
newPane.css({left: 0});
done.call();
}
else {
newPane.animate({left: 0}, 1500, function() {
done.call();
});
}
});