Trying to get this script.aculo.us javascript slideshow to do what I want

Question

So I had this slideshow working perfectly fine using .fade and .appear, but the people I'm doing this for weren't satisfied with that and they want it to behave like THIS ONE where the text overlay drops out and the image slides sideways and then the overlay pops back up.

script.aculo.us has a .DropOut, but not an opposite function so I am working with one I found elsewhere.

This is the code I have so far, but the slideshow isn't doing anything. It just loads the first image and overlay and that's it. No animation. I'm sure I have made some syntax mistakes somewhere, but it's valid and not giving any errors.

JSFiddle (includes html and css as well)

Note that this still doesn't accomodate the new image sliding in from the right, which I haven't found an effect for yet. For now I'd just be happy if this worked as is.

var i = 0;
var image_slide = new Array('image-1', 'image-2');
var overlay_slide = new Array('overlay-1', 'overlay-2');
var NumOfImages = image_slide.length;
var wait = 8000;

function SwapImage(x, y) {
    $(overlay_slide[y]).DropOut({
        duration: 0.5
    });
    $(overlay_slide[y]).fade({
        duration: 0.1
    });
    $(image_slide[x]).appear({
        duration: 0.5
    });
    $(image_slide[y]).Move({ 
        x: -1000, 
        y: 0, 
        mode: 'relative',
        duration: 0.5
    });
    $(overlay_slide[x]).appear({
        duration: 0.1
    });
    $(overlay_slide[x]).Emerge({
        duration: 0.5
    });
}

function StartSlideShow() {
    play = setInterval(Play, wait);
}

function Play() {
    var imageShow, imageHide;

    imageShow = i + 1;
    imageHide = i;

    if (imageShow == NumOfImages) {
        SwapImage(0, imageHide);
        i = 0;
    } else {
        SwapImage(imageShow, imageHide);
        i++;
    }
}

Effect.Emerge = function (element) {
    element = $(element);
    var oldStyle = {
        top: element.getStyle('top'),
        left: element.getStyle('left')
    };
    var position = element.positionedOffset();
    return new Effect.Parallel(
    [new Effect.Move(element, {
        x: 0,
        y: -100,
        sync: true
    }),
    new Effect.Opacity(element, {
        sync: true,
        from: 0.0,
        to: 1.0
    })],
    Object.extend({
        duration: 0.5,
        beforeSetup: function (effect) {
            effect.effects[0].element.show().makePositioned().setStyle({
                top: (position.top + 100) + 'px'
            });
        },
        afterFinishInternal: function (effect) {
            effect.effects[0].element.undoPositioned().setStyle(oldStyle);
        }
    }, arguments[1] || {}));
};
StartSlideShow();

Answer 1

You were on the right track just needed to play with the Effects library a little more, the Emerge function was too much and you needed to go simpler.

I've updated your jsfiddle

http://jsfiddle.net/aB79G/3/

basically you need to prepare the next slide off to the right and move both pictures at once with Effect.Morph instead of Effect.Move

Also notice how I used the afterFinish callback that allows you to string effects together.