Noobslide-Skript einfaches alert einfügen funktioniert nicht
icke
- javascript
0 icke
Hallo liebes Forum,
ich versuche mich zur Zeit mit dem Noobslide-Script von hier - speziell mit dem 6ten Beispiel.
Das eigentliche JavaScript sieht so aus:
var noobSlide = new Class({
initialize: function(params){
this.items = params.items;
this.mode = params.mode || 'horizontal';
this.modes = {horizontal:['left','width'], vertical:['top','height']};
this.size = params.size || 240;
this.box = params.box.setStyle(this.modes[this.mode][1],(this.size*this.items.length)+'px');
this.button_event = params.button_event || 'click';
this.handle_event = params.handle_event || 'click';
this.onWalk = params.onWalk || null;
this.currentIndex = null;
this.previousIndex = null;
this.nextIndex = null;
this.interval = params.interval || 5000;
this.autoPlay = params.autoPlay || true;
this._play = null;
this.handles = params.handles || null;
if(this.handles){
this.addHandleButtons(this.handles);
}
this.buttons = {
previous: [],
next: [],
play: [],
playback: [],
stop: []
};
if(params.addButtons){
for(var action in params.addButtons){
this.addActionButtons(action, $type(params.addButtons[action])=='array' ? params.addButtons[action] : [params.addButtons[action]]);
}
}
this.fx = new Fx.Tween(this.box,$extend((params.fxOptions||{duration:500,wait:false}),{property:this.modes[this.mode][0]}));
this.walk((params.startItem||0),true,true);
},
addHandleButtons: function(handles){
for(var i=0;i<handles.length;i++){
handles[i].addEvent(this.handle_event,this.walk.bind(this,[i,true]));
}
},
addActionButtons: function(action,buttons){
for(var i=0; i<buttons.length; i++){
switch(action){
case 'previous': buttons[i].addEvent(this.button_event,this.previous.bind(this,[true])); break;
case 'next': buttons[i].addEvent(this.button_event,this.next.bind(this,[true])); break;
case 'play': buttons[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'next',false])); break;
case 'playback': buttons[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'previous',false])); break;
case 'stop': buttons[i].addEvent(this.button_event,this.stop.bind(this)); break;
}
this.buttons[action].push(buttons[i]);
}
},
previous: function(manual){
this.walk((this.currentIndex>0 ? this.currentIndex-1 : this.items.length-1),manual);
},
next: function(manual){
this.walk((this.currentIndex<this.items.length-1 ? this.currentIndex+1 : 0),manual);
},
play: function(interval,direction,wait){
this.stop();
if(!wait){
this[direction](false);
}
this._play = this[direction].periodical(interval,this,[false]);
},
stop: function(){
$clear(this._play);
},
walk: function(item,manual,noFx){
if(item!=this.currentIndex){
this.currentIndex=item;
this.previousIndex = this.currentIndex + (this.currentIndex>0 ? -1 : this.items.length-1);
this.nextIndex = this.currentIndex + (this.currentIndex<this.items.length-1 ? 1 : 1-this.items.length);
if(manual){
this.stop();
}
if(noFx){
this.fx.cancel().set((this.size*-this.currentIndex)+'px');
}else{
this.fx.start(this.size*-this.currentIndex);
}
if(manual && this.autoPlay){
this.play(this.interval,'next',true);
}
if(this.onWalk){
this.onWalk((this.items[this.currentIndex] || null), (this.handles && this.handles[this.currentIndex] ? this.handles[this.currentIndex] : null));
}
}
}
});
der Aufruf erfolgt über den folgenden Code
window.addEvent('domready',function(){
var sampleObjectItems = []; //NUMBER OF PICTURES IN AN ARRAY
//FILL THE ARRAY FOR THE SLIDESHOW
for(var i = 1; i < numberOfPictures; i++){
sampleObjectItems[i] = "{title: " + i+"}";
}
var info6 = $('picture_box').getNext().set('opacity',0.5);
var nS6 = new noobSlide({
mode: 'vertical',
box: $('picture_box'),
items: sampleObjectItems,
//HEIGHT FOR THE PICTURES
size: 490,
addButtons: {
previous: $('prev'),
play: $('play'),
stop: $('stop'),
next: $('next')
},
startItem: -1,
button_event: 'click',
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Back.easeOut,
wait: false
}
});
//walk to next item
nS6.next();
});
was ich erreichen möchte, ist folgendes: bei den Funktionen previous und next soll jeweils die Variable "currentIndex" ausgegeben werden. Ich habe mir zwar schon einige Sachen zur this-Funktion durchgelesen, weiß aber nicht, ob ich da schon genau hintergestiegen bin. Probiert habe ich es mit "alert(this.currentIndex);" (natürlich auch ohne "this." davor ...)
Ich weiß also nicht, wo der Fehler liegt bzw. ob das, was ich vorhabe überhaupt möglich ist.
Danke, für eure Hilfe.
Ein direkte Anfrage an den Ersteller des Scripts ergab folgenden Lösungsansatz:
window.addEvent('domready',function(){
var sampleObjectItems = []; //NUMBER OF PICTURES IN AN ARRAY
//FILL THE ARRAY FOR THE SLIDESHOW
for(var i = 1; i < numberOfPictures; i++){
sampleObjectItems[i] = "{title: " + i+"}";
}
var info6 = $('picture_box').getNext().set('opacity',0.5);
var nS6 = new noobSlide({
mode: 'vertical',
box: $('picture_box'),
items: sampleObjectItems,
//HEIGHT FOR THE PICTURES
size: 490,
addButtons: {
previous: $('prev'),
play: $('play'),
stop: $('stop'),
next: $('next')
},
startItem: -1,
button_event: 'click',
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Back.easeOut,
wait: false
},
onWalk: function(currentItem,currentHandle){
alert(this.currentIndex);
}
});
//walk to next item
nS6.next();
});
entscheidend ist diese Stelle:
onWalk: function(currentItem,currentHandle){
alert(this.currentIndex);
}