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();