Hi,
ich benötige öfter mal Callback-Funktionen in den Slidern die ich einsetze. Da ich gerne den PK_NoobSlider einsetzte, habe ich das Javascript um 2 Callback-Funktionen erweitert. Ich stelle die beiden Javascripte mal hier zur Verfügung, unter Umständen könnte man die ja mal in Zukunft so einbauen 
class.noobSlider.js
Code:
/*
Author:
luistar15, <leo020588 [at] gmail.com>
Rainer Ilgen <raineri@gmx.net> Extention for Fading
Philipp Kaiblinger <philipp.kaiblinger@kaipo.at> Extention for Fading adapting for Contao CMS
License:
MIT License
Class
noobSlide (rev.03-11-10)
noobSlide Extention for Fading (rev. 23-10-08)
noobSlide Extension for Fading adapting for Contao CMS (rev. 28-06-2011)
Arguments:
Parameters - see Parameters below
Parameters:
box: dom element | required
items: dom collection | required
size: int | item size (px) | default: 240
mode: string | 'horizontal', 'vertical' | default: 'horizontal'
fade: boolean | default: false
addButtons:{
previous: single dom element OR dom collection| default: null
next: single dom element OR dom collection | default: null
play: single dom element OR dom collection | default: null
playback: single dom element OR dom collection | default: null
stop: single dom element OR dom collection | default: null
}
button_event: string | event type | default: 'click'
handles: dom collection | default: null
handle_event: string | event type| default: 'click'
fxOptions: object | Fx.Tween options | default: {duration:500,wait:false}
interval: int | for periodical | default: 5000
autoPlay: boolean | default: false
onWalk: event | pass arguments: currentItem, currentHandle | default: null
startItem: int | default: 0
Properties:
box: dom element
items: dom collection
size: int
mode: string
fade: boolean
buttons: object
button_event: string
handles: dom collection
handle_event: string
previousIndex: int
nextIndex: int
fx: Fx.Tween instance
interval: int
autoPlay: boolean
onWalk: function
Methods:
previous(manual): walk to previous item
manual: bolean | default:false
next(manual): walk to next item
manual: bolean | default:false
play (interval,direction,wait): auto walk items
interval: int | required
direction: string | "previous" or "next" | required
wait: boolean | required
stop(): stop auto walk
walk(item,manual,noFx): walk to item
item: int | required
manual: bolean | default:false
noFx: boolean | default:false
addHandleButtons(handles):
handles: dom collection | required
addActionButtons(action,buttons):
action: string | "previous", "next", "play", "playback", "stop" | required
buttons: dom collection | required
Requires:
mootools 1.2 core
*/
var noobSlide = new Class({
initialize: function(params){
this.onBefore = params.onBefore || function(){};
this.onAfter = params.onAfter || function(){};
this.items = params.items;
this.mode = params.mode || 'horizontal';
this.fade = params.fade || false;
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.divElements = params.divElements;
this.button_event = params.button_event || 'click';
this.handle_event = params.handle_event || 'click';
this.previewItems_event = params.previewItems_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 || false;
this._play = null;
this.handles = params.handles || null;
this.previewItems = params.previewItems || null;
this.fadeDuration = params.fadeDuration;
if(this.handles){
this.addHandleButtons(this.handles, this.handle_event);
}
if(this.previewItems){
this.addHandleButtons(this.previewItems, this.previewItems_event);
}
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]]);
}
}
if(this.fade)
{
//Prepare Fading
this.orderItems(params);
this.fading((params.startItem||0),true,true);
}
else
{
//original Sliding
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);
}
},
//new function for Ordering the Items for Fading
orderItems: function() {
for(i=0;i<this.items.length;i++)
{
$$(this.divElements)[i].setStyle('position', 'absolute');
$$(this.divElements)[i].setStyle('left', '0px');
$$(this.divElements)[i].setStyle('z-index', i+1);
if(i>0)
{
$$(this.divElements)[i].fade('out');
// hidden inactive elements
$$(this.divElements)[i].setStyle('display', 'none');
}
}
},
addHandleButtons: function(handles, handle_event){
for(var i=0;i<handles.length;i++){
if(this.fade)
{
handles[i].addEvent(handle_event,this.fading.pass([i,true],this));
}
else
{
handles[i].addEvent(handle_event,this.walk.pass([i,true],this));
}
}
},
addActionButtons: function(action,buttons){
for(var i=0; i<buttons.length; i++){
switch(action){
case 'previous': buttons[i].addEvent(this.button_event,this.previous.pass([true],this)); break;
case 'next': buttons[i].addEvent(this.button_event,this.next.pass([true],this)); break;
case 'play': buttons[i].addEvent(this.button_event,this.play.pass([this.interval,'next',false],this)); break;
case 'playback': buttons[i].addEvent(this.button_event,this.play.pass([this.interval,'previous',false],this)); break;
case 'stop': buttons[i].addEvent(this.button_event,this.stop.create({bind:this})); break;
}
this.buttons[action].push(buttons[i]);
}
},
previous: function(manual){
if(this.fade)
{
this.fading((this.currentIndex>0 ? this.currentIndex-1 : this.items.length-1),manual);
}
else
{
this.walk((this.currentIndex>0 ? this.currentIndex-1 : this.items.length-1),manual);
}
},
next: function(manual){
if(this.fade)
{
this.fading((this.currentIndex<this.items.length-1 ? this.currentIndex+1 : 0),manual);
}
else
{
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.onBefore(item,manual,noFx);
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.cancel().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));
}
this.onAfter(item,manual,noFx);
}
},
//Fading
fading: function(item,manual,noFx){
if(item!=this.currentIndex){
this.onBefore(item,manual,noFx);
this.lastIndex=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);
$$(this.divElements)[this.currentIndex].set('tween', {duration: (this.fadeDuration ? this.fadeDuration : 500)});
if(manual){
this.stop();
}
if(!noFx){
// fade in and show active element
$$(this.divElements)[this.currentIndex].fade('in');
$$(this.divElements)[this.currentIndex].setStyle('display', 'block');
$$(this.divElements)[this.lastIndex].fade('out');
}
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));
}
this.onAfter(item,manual,noFx);
}
}
});
class.noobSlider.js
Code:
var noobSlide=new Class({initialize:function(b){this.onBefore = b.onBefore || function(){};this.onAfter = b.onAfter || function(){};this.items=b.items;this.mode=b.mode||"horizontal";this.fade=b.fade||false;this.modes={horizontal:["left","width"],vertical:["top","height"]};this.size=b.size||240;this.box=b.box.setStyle(this.modes[this.mode][1],(this.size*this.items.length)+"px");this.divElements=b.divElements;this.button_event=b.button_event||"click";this.handle_event=b.handle_event||"click";this.previewItems_event=b.previewItems_event||"click";this.onWalk=b.onWalk||null;this.currentIndex=null;this.previousIndex=null;this.nextIndex=null;this.interval=b.interval||5000;this.autoPlay=b.autoPlay||false;this._play=null;this.handles=b.handles||null;this.previewItems=b.previewItems||null;this.fadeDuration=b.fadeDuration;if(this.handles){this.addHandleButtons(this.handles,this.handle_event)}if(this.previewItems){this.addHandleButtons(this.previewItems,this.previewItems_event)}this.buttons={previous:[],next:[],play:[],playback:[],stop:[]};if(b.addButtons){for(var a in b.addButtons){this.addActionButtons(a,$type(b.addButtons[a])=="array"?b.addButtons[a]:[b.addButtons[a]])}}if(this.fade){this.orderItems(b);this.fading((b.startItem||0),true,true)}else{this.fx=new Fx.Tween(this.box,$extend((b.fxOptions||{duration:500,wait:false}),{property:this.modes[this.mode][0]}));this.walk((b.startItem||0),true,true)}},orderItems:function(){for(i=0;i<this.items.length;i++){$$(this.divElements)[i].setStyle("position","absolute");$$(this.divElements)[i].setStyle("left","0px");$$(this.divElements)[i].setStyle("z-index",i+1);if(i>0){$$(this.divElements)[i].fade("out");$$(this.divElements)[i].setStyle("display","none")}}},addHandleButtons:function(b,c){for(var a=0;a<b.length;a++){if(this.fade){b[a].addEvent(c,this.fading.pass([a,true],this))}else{b[a].addEvent(c,this.walk.pass([a,true],this))}}},addActionButtons:function(c,b){for(var a=0;a<b.length;a++){switch(c){case"previous":b[a].addEvent(this.button_event,this.previous.pass([true],this));break;case"next":b[a].addEvent(this.button_event,this.next.pass([true],this));break;case"play":b[a].addEvent(this.button_event,this.play.pass([this.interval,"next",false],this));break;case"playback":b[a].addEvent(this.button_event,this.play.pass([this.interval,"previous",false],this));break;case"stop":b[a].addEvent(this.button_event,this.stop.create({bind:this}));break}this.buttons[c].push(b[a])}},previous:function(a){if(this.fade){this.fading((this.currentIndex>0?this.currentIndex-1:this.items.length-1),a)}else{this.walk((this.currentIndex>0?this.currentIndex-1:this.items.length-1),a)}},next:function(a){if(this.fade){this.fading((this.currentIndex<this.items.length-1?this.currentIndex+1:0),a)}else{this.walk((this.currentIndex<this.items.length-1?this.currentIndex+1:0),a)}},play:function(a,c,b){this.stop();if(!b){this[c](false)}this._play=this[c].periodical(a,this,[false])},stop:function(){$clear(this._play)},walk:function(c,b,a){if(c!=this.currentIndex){this.onBefore(c,b,a);this.currentIndex=c;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(b){this.stop()}if(a){this.fx.cancel().set((this.size*-this.currentIndex)+"px")}else{this.fx.cancel().start(this.size*-this.currentIndex)}if(b&&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))}this.onAfter(a,b,c);}},fading:function(c,b,a){if(c!=this.currentIndex){this.onBefore(c,b,a);this.lastIndex=this.currentIndex;this.currentIndex=c;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);$$(this.divElements)[this.currentIndex].set("tween",{duration:(this.fadeDuration?this.fadeDuration:500)});if(b){this.stop()}if(!a){$$(this.divElements)[this.currentIndex].fade("in");$$(this.divElements)[this.currentIndex].setStyle("display","block");$$(this.divElements)[this.lastIndex].fade("out")}if(b&&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))}this.onAfter(c,b,a);}}});
Ich hab beide Scripte bearbeitet, da die Kurzversion andere Variablen übergibt und man in der offenen Version meine Änderungen nachvollziehen kann. In beiden Versionen, habe ich lediglich 2 neue Eigenschaften an den Anfang der Instanzierung gesetzt und weiter unten im Code rufe ich dann einfach die Funktionen auf. Im Template kann man somit die Funktionen überschreiben und eigenen Code einsetzten. Es ist somit möglich die Titel der Bilder zu wechseln, oder anhand des Bilderindex, der auch zurückgegeben wird, kann man Container aus/einfaden.
Beispiel:
Ich habe über dem Slider mit 3 Bildern 3 Text-Elemente mit der Klasse index-titletext eingefügt, diese können dann einfach mit der onBefore-Funktion ein-/ausgefadet werden. Der Code ist nur Beispielhaft, den Rest hab ich nicht mit Rauskopiert.
Code:
window.addEvent('domready', function() {
noobslide<?php echo $this->sliderId; ?> = new noobSlide({
box: document.getElement('#<?php echo $this->articleId; ?> .ce_noobSlide_container'),
items: [<?php echo $this->jsElements; ?>],
onBefore: function(index,b,c){
$$('.index-titletext').fade(0); /* Erst alle ausblenden */
$$('.index-titletext')[index].fade(1); /* Element Nummer [index] einblenden */
}
/* Mehr Code/Einstellungen hier eintragen */
});
});
Ist nur ein Vorschlag bzw. ein Tutorial wie man Callbacks einsetzen kann
Die Aufrufe im Fade-/Walk-Block kann man evt auch in den Next-Block stellen, evt um den CurrentIndex zu übergeben, zusätzlich zum nächsten bzw vorherigen Index.
Grüße
Sioweb
Callback-Funktionen im Javascript
Lesezeichen