| Current Path : /home/zieirix/www/components/com_roksprocket/layouts/features/themes/slideshow/ |
| Current File : /home/zieirix/www/components/com_roksprocket/layouts/features/themes/slideshow/slideshow.js |
((function(){
if (typeof this.RokSprocket == 'undefined') this.RokSprocket = {};
else Object.merge(this.RokSprocket, {Slideshow: null});
var Slideshow = new Class({
Extends: this.RokSprocket.Features,
options: {
curve: 'cubic-bezier(0.37,0.61,0.59,0.87)',
duration: '400ms',
data: 'slideshow',
settings: {
animation: 'crossfade',
autoplay: false,
delay: 5
}
},
animate: function(container, from, to){
var contents = container.getElements('[data-' + this.data + '-content]'),
images = container.getElements('[data-' + this.data + '-image]'),
settings = this.getSettings(container),
animation = {
content: this.animations.crossfade,
image: this.animations[settings.animation] || this.animations.crossfade
},
current = {
content: contents[from],
image: images[from]
},
next = {
content: contents[to],
image: images[to]
};
if (Browser.ie && Browser.version < 8){
contents.setStyle('zoom', 1);
images.setStyle('zoom', 1);
}
Object.each(current, function(value, key){
var transition = (key == 'content') ?
animation[key]
:
settings.animation == 'random' ? this.getRandom() : animation[key];
if (key == 'content') contents.styles(Object.merge({}, transition.from, {position: 'absolute'}));
if (key == 'image') images.styles(Object.merge({}, transition.from, {position: 'absolute'}));
current[key].styles(Object.merge({}, transition.to, {'z-index': 1}));
var initialStyles = {'z-index': 2, 'position': 'absolute'};
if (key == 'image'){
current[key].styles({position: 'relative'});
['top', 'right', 'bottom', 'left'].each(function(dir){
next[key].style[dir] = '';
}, this);
if (transition == 'crossfade'){
Object.merge(initialStyles, {top: 0, left: 0});
}
}
next[key].styles(Object.merge({}, transition.from, initialStyles));
if (Browser.ie && Browser.version < 9){
next[key].set('morph', {
link: 'cancel',
duration: this.options.duration.toInt(),
transition: 'quad:in:out',
onComplete: function(){
if (key == 'image'){
next[key].styles(Object.merge({}, transition.to, {position: 'relative'}));
current[key].styles(Object.merge({}, transition.from, {position: 'absolute'}));
}
current[key].styles(transition.from);
next[key].get('morph').removeEvents('onComplete');
if (settings.autoplay && settings.autoplay.toInt()) this.startTimer(container);
}.bind(this)
}).morph(transition.to);
if (key == 'content'){
current[key].set('morph', {
link: 'cancel',
duration: this.options.duration.toInt(),
transition: 'quad:in:out'
}).morph(transition.from);
}
} else {
next[key].moofx(transition.to, {
duration: this.options.duration,
equation: this.options.curve,
callback: function(){
if (key == 'image'){
next[key].styles(Object.merge({}, transition.to, {position: 'relative'}));
current[key].styles(Object.merge({}, transition.from, {position: 'absolute'}));
}
current[key].styles(transition.from);
if (settings.autoplay && settings.autoplay.toInt()) this.startTimer(container);
}.bind(this)
});
if (key == 'content'){
current[key].moofx(transition.from, {
duration: this.options.duration,
equation: this.options.curve
});
}
}
}, this);
}
});
this.RokSprocket.Slideshow = Slideshow;
})());