Mootools diverse Classes
Ik heb een class geschreven voor mootools 1.2 die toegepast kan worden als slideshow.
Een voorbeeldje
Willen jullie eens testen of het allemaal werkt zoals de bedoeling is en eventuele suggesties/foutmeldingen + browser melden?
Bedankt!
Edit, de Class
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/*
Class: cvSlideShow
Author: Crispijn Verkade
Website: http://crispijnverkade.nl
Version: 1.0 beta
Date: 10/03/2009
Built For: MooTools 1.2.0
*/
var cvSlideShow = new Class({
//implements
Implements: [Options],
//options
options: {
images: '.image',
buttons: '.nav_button',
autoplay: true, //bool
nextbutton: 'nav_next',
prevbutton: 'nav_prev',
pauzebutton: 'nav_play',
statbut: 'stat',
showtime: 2000, //milliseconds
duration: 500 //milliseconds
},
//initialization
initialize: function(options) {
//set options
this.setOptions(options);
this.images = $$(this.options.images);
this.currentImage = 0;
this.prepareEvents();
$(this.images[0]).get('tween', {property: 'opacity', duration: this.options.duration}).start([0,1]);
this.setStat();
if(this.options.autoplay == true){
this.startPauze();
}
this.navImages(this.options.autoplay);
},
prepareEvents: function(){
$(this.options.nextbutton).addEvent('click', this.toNextPrev.bind(this,'next',false));
$(this.options.prevbutton).addEvent('click', this.toNextPrev.bind(this,'prev',false));
$(this.options.pauzebutton).addEvent('click', this.startPauze.bind(this,[true]));
},
setStat: function(){
$(this.options.statbut).empty().set('html', 'Image' + (this.currentImage + 1).toInt() + '/' + this.images.length);
},
autoPlayStart: function(){
this.autoplay = this.toNextPrev.periodical(this.options.showtime,this,['next',true]);
},
autoPlayEnd: function(){
$clear(this.autoplay)
},
startPauze: function(){
if(this.run == true){
//pauze
this.autoPlayEnd();
this.run = false;
$(this.options.pauzebutton).empty();
new Element('img',{'src': 'images/nav_play.png'}).inject($(this.options.pauzebutton));
this.navImages(false);
}else{
//play
this.autoPlayStart();
this.run = true;
$(this.options.pauzebutton).empty();
new Element('img',{'src': 'images/nav_pauze.png'}).inject($(this.options.pauzebutton));
}
},
navImages: function(loop){
if(loop != true){
//button management
if(this.currentImage == 0){
//hide prev button
$(this.options.prevbutton).addClass('non_active');
}else if(this.currentImage == this.images.length - 1){
//hide next button
$(this.options.nextbutton).addClass('non_active');
}else{
$(this.options.nextbutton).removeClass('non_active');
$(this.options.prevbutton).removeClass('non_active');
}
}else{
$(this.options.nextbutton).removeClass('non_active');
$(this.options.prevbutton).removeClass('non_active');
}
},
toNextPrev: function(direction,loop){
$(this.images[this.currentImage]).get('tween', {property: 'opacity', duration: this.options.duration}).start([1,0]);
if(loop == true){
//loop the images array
if(direction == 'next'){
if((this.currentImage + 1) < this.images.length){
this.currentImage = this.currentImage + 1;
}else{
this.currentImage = 0;
}
}else if(direction == 'prev'){
if(this.currentImage === 0){
this.currentImage = this.images.length-1;
}else{
this.currentImage = this.currentImage - 1;
}
}
}else{
if(direction == 'next' && (this.currentImage + 1) < this.images.length){
this.currentImage = this.currentImage + 1;
}else if(direction == 'prev' && this.currentImage > 0){
this.currentImage = this.currentImage - 1;
}
}
$(this.images[this.currentImage]).get('tween', {property: 'opacity', duration: this.options.duration}).start([0,1]);
this.navImages(loop);
this.setStat();
}
});
Class: cvSlideShow
Author: Crispijn Verkade
Website: http://crispijnverkade.nl
Version: 1.0 beta
Date: 10/03/2009
Built For: MooTools 1.2.0
*/
var cvSlideShow = new Class({
//implements
Implements: [Options],
//options
options: {
images: '.image',
buttons: '.nav_button',
autoplay: true, //bool
nextbutton: 'nav_next',
prevbutton: 'nav_prev',
pauzebutton: 'nav_play',
statbut: 'stat',
showtime: 2000, //milliseconds
duration: 500 //milliseconds
},
//initialization
initialize: function(options) {
//set options
this.setOptions(options);
this.images = $$(this.options.images);
this.currentImage = 0;
this.prepareEvents();
$(this.images[0]).get('tween', {property: 'opacity', duration: this.options.duration}).start([0,1]);
this.setStat();
if(this.options.autoplay == true){
this.startPauze();
}
this.navImages(this.options.autoplay);
},
prepareEvents: function(){
$(this.options.nextbutton).addEvent('click', this.toNextPrev.bind(this,'next',false));
$(this.options.prevbutton).addEvent('click', this.toNextPrev.bind(this,'prev',false));
$(this.options.pauzebutton).addEvent('click', this.startPauze.bind(this,[true]));
},
setStat: function(){
$(this.options.statbut).empty().set('html', 'Image' + (this.currentImage + 1).toInt() + '/' + this.images.length);
},
autoPlayStart: function(){
this.autoplay = this.toNextPrev.periodical(this.options.showtime,this,['next',true]);
},
autoPlayEnd: function(){
$clear(this.autoplay)
},
startPauze: function(){
if(this.run == true){
//pauze
this.autoPlayEnd();
this.run = false;
$(this.options.pauzebutton).empty();
new Element('img',{'src': 'images/nav_play.png'}).inject($(this.options.pauzebutton));
this.navImages(false);
}else{
//play
this.autoPlayStart();
this.run = true;
$(this.options.pauzebutton).empty();
new Element('img',{'src': 'images/nav_pauze.png'}).inject($(this.options.pauzebutton));
}
},
navImages: function(loop){
if(loop != true){
//button management
if(this.currentImage == 0){
//hide prev button
$(this.options.prevbutton).addClass('non_active');
}else if(this.currentImage == this.images.length - 1){
//hide next button
$(this.options.nextbutton).addClass('non_active');
}else{
$(this.options.nextbutton).removeClass('non_active');
$(this.options.prevbutton).removeClass('non_active');
}
}else{
$(this.options.nextbutton).removeClass('non_active');
$(this.options.prevbutton).removeClass('non_active');
}
},
toNextPrev: function(direction,loop){
$(this.images[this.currentImage]).get('tween', {property: 'opacity', duration: this.options.duration}).start([1,0]);
if(loop == true){
//loop the images array
if(direction == 'next'){
if((this.currentImage + 1) < this.images.length){
this.currentImage = this.currentImage + 1;
}else{
this.currentImage = 0;
}
}else if(direction == 'prev'){
if(this.currentImage === 0){
this.currentImage = this.images.length-1;
}else{
this.currentImage = this.currentImage - 1;
}
}
}else{
if(direction == 'next' && (this.currentImage + 1) < this.images.length){
this.currentImage = this.currentImage + 1;
}else if(direction == 'prev' && this.currentImage > 0){
this.currentImage = this.currentImage - 1;
}
}
$(this.images[this.currentImage]).get('tween', {property: 'opacity', duration: this.options.duration}).start([0,1]);
this.navImages(loop);
this.setStat();
}
});
Gewijzigd op 01/01/1970 01:00:00 door Crispijn -
Gesponsorde koppelingen:
Een voorbeeldje
Tevens nog een paar vraagjes:
weten jullie hoe ik het back button event van de browsers kan afvangen? Ik heb verschillende dingen geprobeerd maar ik krijg het nog niet helemaal werkend...
In internet explorer 7 geeft hij bij het begin geen gekleurde afbeeldingen weer. Wel na het klikken. Hoe kan dit?
Firefox gaat goed om met anchor namen met spaties. Internet explorer vervangt een spatie door '%'. Hoe zouden jullie dit oplossen?
Enkele highlights
enkele items die al bezocht zijn staan in het array visited. Deze kan bijvoorbeeld door een cookie opgehaald worden (wordt nog aan gewerkt)
Wanneer je bijvoorbeeld naar http://design.crispijnverkade.nl/cvStepSlider/#Blox gaat gaat hij ook direct naar de juiste pagina
In dit geval worden de grijze afbeeldingen vervangen door de kleur afbeeldingen welke gedefineerd staan in het alt attribuut van de afbeeldingen. Zo krijgt je website steeds meer kleur - wat bij mij de bedoeling is :)
Todo
Backbutton realiseren
Visited opslaan in cookies
vertical scrollen controleren
navigation images bij eerste en laatste pagina aanpassen
Jullie nog ideeën?
De class
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
/*
Class: cvStepSlider
Author: Crispijn Verkade
Website: http://crispijnverkade.nl
Version: 1.0
Date: 11/03/2009
Built For: MooTools 1.2.0
*/
var cvStepSlider = new Class({
Implements: [Options,Events,Chain],
options: {
wrapper: 'portfolio_index', //wrapper for the list elements
list: 'items', //select list
items: '#portfolio_index ul li img', //select list elements
itemWidth: 140, //int pixels
itemHeight: 105, //int pixels
startSlide: 1, //slide to start
type: 'horizontal', //type of the slider
nextbutton: 'next',
prevbutton: 'prev',
visited: ['#Vervandekade','#Young Dutch Design','#Blox','#PhilliShave']
},
initialize: function(options) {
//set options
this.setOptions(options);
//define variables
this.items = $$(this.options.items);
this.wrapperHeight = 0;
this.wrapperWidth = 0;
this.offset = 0;
this.slides = this.countSlides();
this.slide = this.options.startSlide;
this.images = []
this.urls = [];
this.history = [];
this.visited = this.options.visited;
//run the functions
this.prepare();
},
prepare: function(){
var self = this;
var visited = this.visited;
$(self.options.list).hide();
$(this.options.nextbutton).addEvent('click', this.toNextPrev.bind(this,'next',[true]));
$(this.options.prevbutton).addEvent('click', this.toNextPrev.bind(this,'prev',[true]));
$(this.options.wrapper).addEvent('mousewheel', function(e){
self.toNextPrev(e.wheel < 0 ? 'next' : 'prev');
});
window.addEvent('backbutton', function(e){
self.goBack(e);
});
this.items.each(function(i){
self.urls.push(i.getParent().getAttribute ('href'));
self.images.push(i.getAttribute('src'),i.getAttribute('alt'));
if(visited.contains(i.getParent().getAttribute ('href'))){
i.setProperty('src', i.getProperty('alt'));
}else{
i.addEvents({
'mouseenter' : function(){
this.get('tween', {property: 'opacity', duration: 300}).start([.6,1]);//.addClass('item_hover');
},
'mouseleave' : function(){
this.get('tween', {property: 'opacity', duration: 300}).start([1,.6]);//.removeClass('item_hover');
},
'click' : function(){
this.get('tween', {property: 'opacity', duration: 2000}).start([.6,0]);
this.setProperty('src', this.getProperty('alt'))
this.get('tween', {property: 'opacity', duration: 1000, wait: 2000}).start([0,1]);
self.addVisited(i);
}
});
i.get('tween', {property: 'opacity', duration: 300}).start([1,.6]);
}
});
var loading = new Asset.images(self.images, {
onComplete: function(){
$(self.options.wrapper).removeClass('loading');
$(self.options.list).show();
self.gotoItem();
self.navInit();
}
});
},
goBack:function(e){
alert('back' + e);
},
countSlides: function(){
this.wrapperWidth = $(this.options.wrapper).getWidth();
this.wrapperHeight = $(this.options.wrapper).getHeight();
return Math.ceil((this.items.length) / (this.wrapperWidth / this.options.itemWidth));
},
addVisited: function(e){
this.visited.push(e.getParent().getAttribute ('href'));
//write cookie?
e.removeEvents('mouseleave');
e.removeEvents('mouseenter');
},
gotoItem: function(){
if(this.slide == 1){
var url = document.location.hash.replace('#', '');
if(url){
var item = this.urls.indexOf('#' + url) + 1;
this.slide = Math.ceil((item) / (this.wrapperWidth / this.options.itemWidth));
this.toNextPrev(true,this.slide);
}else{
this.slide = 1;
}
}
},
navInit: function(){
if(this.slide == 1){
$(this.options.prevbutton).addClass('non_active');
}if(this.slide == this.slides){
$(this.options.nextbutton).addClass('non_active');
}else{
$(this.options.prevbutton).removeClass('non_active');
}
},
toNextPrev: function(direction,slide){
if(!slide){
if(direction == 'next' && this.offset <= 0 && this.offset >= -(this.slides - 2) * this.wrapperWidth){
if(this.options.type == 'horizontal'){
this.offset = this.offset - this.wrapperWidth;
}else if(this.options.type == 'vertical'){
this.offset = this.offset - this.wrapperHeight;
}
}else if(direction == 'prev' && this.offset != 0){
if(this.options.type == 'horizontal'){
this.offset = this.offset + this.wrapperWidth;
}else if(this.options.type == 'vertical'){
this.offset = this.offset + this.wrapperHeight;
}
}
}else{
this.offset = -(slide.toInt() * this.wrapperWidth) + this.wrapperWidth;
}
this.navInit();
var myEffect = new Fx.Tween($(this.options.list));
myEffect.start('margin-left', this.offset);
}
});
Class: cvStepSlider
Author: Crispijn Verkade
Website: http://crispijnverkade.nl
Version: 1.0
Date: 11/03/2009
Built For: MooTools 1.2.0
*/
var cvStepSlider = new Class({
Implements: [Options,Events,Chain],
options: {
wrapper: 'portfolio_index', //wrapper for the list elements
list: 'items', //select list
items: '#portfolio_index ul li img', //select list elements
itemWidth: 140, //int pixels
itemHeight: 105, //int pixels
startSlide: 1, //slide to start
type: 'horizontal', //type of the slider
nextbutton: 'next',
prevbutton: 'prev',
visited: ['#Vervandekade','#Young Dutch Design','#Blox','#PhilliShave']
},
initialize: function(options) {
//set options
this.setOptions(options);
//define variables
this.items = $$(this.options.items);
this.wrapperHeight = 0;
this.wrapperWidth = 0;
this.offset = 0;
this.slides = this.countSlides();
this.slide = this.options.startSlide;
this.images = []
this.urls = [];
this.history = [];
this.visited = this.options.visited;
//run the functions
this.prepare();
},
prepare: function(){
var self = this;
var visited = this.visited;
$(self.options.list).hide();
$(this.options.nextbutton).addEvent('click', this.toNextPrev.bind(this,'next',[true]));
$(this.options.prevbutton).addEvent('click', this.toNextPrev.bind(this,'prev',[true]));
$(this.options.wrapper).addEvent('mousewheel', function(e){
self.toNextPrev(e.wheel < 0 ? 'next' : 'prev');
});
window.addEvent('backbutton', function(e){
self.goBack(e);
});
this.items.each(function(i){
self.urls.push(i.getParent().getAttribute ('href'));
self.images.push(i.getAttribute('src'),i.getAttribute('alt'));
if(visited.contains(i.getParent().getAttribute ('href'))){
i.setProperty('src', i.getProperty('alt'));
}else{
i.addEvents({
'mouseenter' : function(){
this.get('tween', {property: 'opacity', duration: 300}).start([.6,1]);//.addClass('item_hover');
},
'mouseleave' : function(){
this.get('tween', {property: 'opacity', duration: 300}).start([1,.6]);//.removeClass('item_hover');
},
'click' : function(){
this.get('tween', {property: 'opacity', duration: 2000}).start([.6,0]);
this.setProperty('src', this.getProperty('alt'))
this.get('tween', {property: 'opacity', duration: 1000, wait: 2000}).start([0,1]);
self.addVisited(i);
}
});
i.get('tween', {property: 'opacity', duration: 300}).start([1,.6]);
}
});
var loading = new Asset.images(self.images, {
onComplete: function(){
$(self.options.wrapper).removeClass('loading');
$(self.options.list).show();
self.gotoItem();
self.navInit();
}
});
},
goBack:function(e){
alert('back' + e);
},
countSlides: function(){
this.wrapperWidth = $(this.options.wrapper).getWidth();
this.wrapperHeight = $(this.options.wrapper).getHeight();
return Math.ceil((this.items.length) / (this.wrapperWidth / this.options.itemWidth));
},
addVisited: function(e){
this.visited.push(e.getParent().getAttribute ('href'));
//write cookie?
e.removeEvents('mouseleave');
e.removeEvents('mouseenter');
},
gotoItem: function(){
if(this.slide == 1){
var url = document.location.hash.replace('#', '');
if(url){
var item = this.urls.indexOf('#' + url) + 1;
this.slide = Math.ceil((item) / (this.wrapperWidth / this.options.itemWidth));
this.toNextPrev(true,this.slide);
}else{
this.slide = 1;
}
}
},
navInit: function(){
if(this.slide == 1){
$(this.options.prevbutton).addClass('non_active');
}if(this.slide == this.slides){
$(this.options.nextbutton).addClass('non_active');
}else{
$(this.options.prevbutton).removeClass('non_active');
}
},
toNextPrev: function(direction,slide){
if(!slide){
if(direction == 'next' && this.offset <= 0 && this.offset >= -(this.slides - 2) * this.wrapperWidth){
if(this.options.type == 'horizontal'){
this.offset = this.offset - this.wrapperWidth;
}else if(this.options.type == 'vertical'){
this.offset = this.offset - this.wrapperHeight;
}
}else if(direction == 'prev' && this.offset != 0){
if(this.options.type == 'horizontal'){
this.offset = this.offset + this.wrapperWidth;
}else if(this.options.type == 'vertical'){
this.offset = this.offset + this.wrapperHeight;
}
}
}else{
this.offset = -(slide.toInt() * this.wrapperWidth) + this.wrapperWidth;
}
this.navInit();
var myEffect = new Fx.Tween($(this.options.list));
myEffect.start('margin-left', this.offset);
}
});
edit
preloaden afbeeldingen gefixt
Gewijzigd op 01/01/1970 01:00:00 door Crispijn -
