"
User:L7ukas/NivooSlider.js
From 2010.igem.org
Note: After saving, you may have to bypass your browser's cache to see the changes. Mozilla / Firefox / Safari: hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Command-R on a Macintosh); Konqueror: click Reload or press F5; Opera: clear the cache in Tools → Preferences; Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5.
/*
---
script: NivooSlider.js
description: A nice image slider for MooTools.
license: MIT-style license
authors:
- Johannes Fischer
requires:
- core/1.2.4: '*'
provides:
- NivooSlider
...
*/
var NivooSlider = new Class({
Implements: [Events,Options],
caption: null,
children: null,
containerSize: 0,
count: 0,
currentSlide: 0,
currentImage: '',
effects: {
horizontal: ['fade', 'fold', 'sliceLeftUp', 'sliceLeftDown' , 'sliceLeftRightDown', 'sliceLeftRightUp', 'sliceRightDown', 'sliceRightUp'],
vertical: ['fade','fold','sliceDownLeft','sliceDownRight','sliceUpDownLeft','sliceUpDownRight','sliceUpLeft','sliceUpRight']
},
hover: false,
interval: null,
paused: false,
running: false,
totalSlides: 0,
options: {
animSpeed: 500,
autoPlay: true,
effect:'sliceDown',
interval: 3000,
orientation: 'vertical',
pauseOnHover: true,
slices: 15,
// not implemented yet
directionNav: true,
directionNavHide: true,
controlNav: true
//onStart: $empty(),
//onFinish: $empty()
},
initialize: function(container, options)
{
this.container = $(container);
this.setOptions(options);
this.initSlider();
this.createSlices();
if(this.options.autoPlay)
{
this.play();
}
},
/**
* Getter
*/
getImages: function()
{
return this.container.getElements('img');
},
getSlices: function()
{
return this.container.getElements('.nivoo-slice');
},
/**
* Setter
*/
setBackgroundImage: function()
{
this.container.setStyle('background-image','url('+this.currentImage.get('src') +')');
},
setCaptionText: function(text)
{
this.caption.set('text', text);
},
/**
* Create
*/
initSlider: function()
{
this.container.addClass('nivooSlider');
this.containerSize = this.container.getSize();
// Find our slider children
this.children = this.getImages();
this.totalSlides = this.children.length;
this.children.setStyle('display','none');
this.currentImage = this.children[0];
// init LinkHolder
this.createLinkHolder();
// Set first background
this.container.setStyle('background-image', 'url('+this.currentImage.get('src')+')');
this.createCaption();
this.showCaption();
// attach pauseOnHover
if(this.options.pauseOnHover && this.options.autoPlay)
{
this.container.addEvents({
'mouseenter': this.pause.bindWithEvent(this),
'mouseleave': this.play.bindWithEvent(this)
});
}
},
createCaption: function()
{
this.caption = new Element('p', {
'class': 'nivoo-caption',
styles: {
opacity: 0
}
}).inject(this.container);
this.caption.store('fxInstance', new Fx.Morph(this.caption, {
duration: 200,
wait: false
}));
this.caption.store('height', this.caption.getHeight());
},
createLinkHolder: function()
{
this.linkHolder = new Element('a', {
'class': 'nivoo-link',
href: '#'
}).inject(this.container);
},
createSlices: function()
{
var sliceSize = {
x: (this.container.getWidth()/this.options.slices).round(),
y: (this.container.getHeight()/this.options.slices).round()
};
this.options.slices.each(function(i){
var slice = new Element('div', {
'class': 'nivoo-slice'
}).inject(this.container);
var position = {
left: this.options.orientation == 'vertical' ? sliceSize.x*i : 0,
top: this.options.orientation == 'horizontal' ? sliceSize.y*i : 0
};
// set size & position
if(this.options.orientation == 'horizontal')
{
slice.setStyles({
height: i == this.options.slices-1 ? this.container.getHeight()-(sliceSize.y*i) : sliceSize.y,
top: position.top,
width: '100%'
});
}
// if vertical
else
{
slice.setStyles({
left: position.left,
width: i == this.options.slices-1 ? this.container.getWidth()-(sliceSize.x*i) : sliceSize.x
});
}
slice.store('fxInstance', new Fx.Morph(slice, {
duration: this.options.animSpeed
})).store('position', position);
}, this);
},
/**
* Caption
*/
hideCaption:function()
{
var fx = this.caption.retrieve('fxInstance');
fx.start({
bottom: this.caption.retrieve('height') * -1,
opacity: 0
});
},
showCaption: function()
{
var title = this.currentImage.get('title');
if(!title){
return;
}
this.setCaptionText(title);
var fx = this.caption.retrieve('fxInstance');
fx.start({
bottom: 0,
opacity: 1
});
},
/**
* Slide / Animations
*/
play: function()
{
this.interval = this.slide.periodical(this.options.interval, this);
},
pause: function()
{
$clear(this.interval);
},
slide: function()
{
if(this.running)
{
return;
}
// Set current background before change
this.setBackgroundImage();
this.currentSlide++;
if(this.currentSlide == this.totalSlides) this.currentSlide = 0;
if(this.currentSlide < 0) this.currentSlide = (this.totalSlides - 1);
// Set currentImage
this.currentImage = this.children[this.currentSlide];
//Set active link
var imageParent = this.currentImage.getParent();
if(imageParent.get('tag') == 'a')
{
this.linkHolder.setStyle('display', 'block').set('href', imageParent.get('href'));
}
else
{
this.linkHolder.setStyle('display', 'none');
}
// Process caption
this.hideCaption();
this.showCaption();
var slices = this.getSlices();
var timeBuff = 0;
//Set new slice backgrounds
var orientation = this.options.orientation;
slices.each(function(slice, i){
var position = slice.retrieve('position');
slice.setStyles({
background: 'url('+this.currentImage.get('src')+') no-repeat -'+ position.left +'px '+ position.top*-1 +'px',
opacity: 0
});
var property = orientation == 'horizontal' ? 'width' : 'height';
slice.setStyle(property, 0);
}, this);
// fire onStart function
this.start();
// Run effects
this.running = true;
var effect = this.options.effect;
if(effect == 'random')
{
effect = this.effects[orientation].getRandom();
}
// vertical effects
if(['sliceDownRight', 'sliceDownLeft'].contains(effect))
{
if(effect == 'sliceDownLeft')
{
slices = slices.reverse();
}
slices.each(function(slice, i){
slice.setStyle('top', 0);
this.animate.delay(100 + timeBuff, this, [slice, 'height', this.containerSize.y]);
timeBuff+= 50;
}, this);
}
else if(['sliceUpRight', 'sliceUpLeft'].contains(effect))
{
if(effect == 'sliceUpLeft')
{
slices = slices.reverse();
}
slices.each(function(slice, i){
var fx = slice.retrieve('fxInstance');
slice.setStyle('bottom', 0);
this.animate.delay(100 + timeBuff, this, [slice, 'height', this.containerSize.y]);
timeBuff+= 50;
}, this);
}
else if(['sliceUpDownRight', 'sliceUpDownLeft'].contains(effect))
{
if(effect == 'sliceUpDownLeft')
{
slices = slices.reverse();
}
slices.each(function(slice, i){
if(i%2 == 0)
{
slice.setStyle('top', 0);
}
else
{
slice.setStyle('bottom', 0);
}
this.animate.delay(100 + timeBuff, this, [slice, 'height', this.containerSize.y]);
timeBuff+= 50;
}, this);
}
// horizontal effects
else if(['sliceLeftUp', 'sliceLeftDown' , 'sliceRightDown', 'sliceRightUp'].contains(effect))
{
if(effect == 'sliceLeftUp' || effect == 'sliceRightUp')
{
slices = slices.reverse();
}
if(effect == 'sliceRightDown' || effect == 'sliceRightUp')
{
slices.setStyle('right', 0);
}
else
{
slices.setStyle('left', 0);
}
slices.each(function(slice, i){
this.animate.delay(100 + timeBuff, this, [slice, 'width', this.containerSize.x]);
timeBuff+= 50;
}, this);
}
else if(['sliceLeftRightDown', 'sliceLeftRightUp'].contains(effect))
{
if(effect == 'sliceLeftRightUp')
{
slices = slices.reverse();
}
slices.each(function(slice, i){
if(i%2 == 0)
{
slice.setStyle('left', 0);
}
else
{
slice.setStyle('right', 0);
}
this.animate.delay(100 + timeBuff, this, [slice, 'width', this.containerSize.x]);
timeBuff+= 50;
}, this);
}
// horizontal or vertical
else if(effect == 'fold')
{
slices.each(function(slice, i){
if(orientation == 'horizontal')
{
var property = 'height';
var to = slice.getHeight();
slice.setStyles({
height: 0,
width: this.containerSize.x
});
}
else
{
var property = 'width';
var to = slice.getWidth();
slice.setStyles({
height: this.containerSize.y,
top: 0,
width: 0
});
}
this.animate.delay(100 + timeBuff, this, [slice, property, to]);
timeBuff+= 50;
}, this);
}
else // if(effect == 'fade')
{
slices.each(function(slice, i){
if(orientation == 'horizontal')
{
slice.setStyle('width', this.containerSize.x);
}
else
{
slice.setStyle('height', this.containerSize.y);
}
this.animate.delay(100, this, [slice]);
}, this);
}
},
animate: function(slice, property, to)
{
this.count++;
var fx = slice.retrieve('fxInstance');
var styles = {
opacity: 1
};
styles[property] = to;
fx.start(styles).chain(function(){
if(this.count == this.options.slices)
{
this.running = false;
// fire onFinish function
this.finish();
this.count = 0;
}
}.bind(this));
},
/**
* Events
*/
finish: function()
{
this.fireEvent('finish');
},
start: function()
{
this.fireEvent('start');
}
});
