Mootoolsのスライダー調整

Question

mootoolsを初めて使用しています。私はMooSliderでjoomlaのサイトを持っている：

<script language="javascript" type="text/javascript"> 
window.addEvent('domready', function(){ 
    new MooSlider({ 
     container:'topslider', 
     slides:'.slide', 
     navs:'.navigator ul li', 

     effectDuration: 1000, 
     fromTop:500, 
     topDist:500, 
     slideDelay: 3000  }); 
}) 

ページURLはhttp://www.miltonwebsitedesign.ca

は、あなたがの上にスライダーを見ることができます：

var MooSlider = new Class({ 
initialize: function(options) { 
    this.options = Object.extend({ 
     container: null, 
     slides: null, 
     navs:null, 
     transition: Fx.Transitions.Sine.easeOut, 
     effectDuration: 500, 
     fromTop: 500, 
     topDist: 100, 
     slideDelay: 5000 
    }, options || {}); 

    if(!$(this.options.container)) return; 
    this.start(); 
}, 

start: function(){ 
    this.elements = $(this.options.container).getElements(this.options.slides); 
    this.navs = $(this.options.container).getElements(this.options.navs); 
    this.currentElement = 0; 

    this.elements.each(function(elem, i){ 
     var nav = this.navs[i]; 

     if(i==this.currentElement){ 
      nav.addClass('selected');    
     } 
     elem.setStyles({ 
      'position':'absolute', 
      'top':0, 
      'left':0, 
      'opacity':(i==this.currentElement ? 1 : 0) 
     }); 

     this.elements[i]['fx'] = new Fx.Styles(elem, { 
      duration:this.options.effectDuration, 
      wait:false, 
      transition:this.options.transition 
     }); 
     this.elements[i]['nav'] = nav; 

     elem.addEvents({ 
      'mouseenter': function(){ 
       $clear(this.period); 
      }.bind(this), 
      'mouseleave': function(){ 
       if(this.options.slideDelay) 
        this.period = this.rotate.periodical(this.options.slideDelay, this); 
      }.bind(this)    
     }); 

     nav.addEvent('click', function(event){ 

      if(this.currentElement==i) return; 
      new Event(event).stop();     
      $clear(this.period); 
      this.changeSlide(i); 
      if(this.options.slideDelay) 
       this.period = this.rotate.periodical(this.options.slideDelay, this); 

     }.bind(this)); 

    }.bind(this)); 
    if(this.options.slideDelay) 
     this.period = this.rotate.periodical(this.options.slideDelay, this); 

}, 

rotate: function(){ 
    var i = this.currentElement+1 < this.elements.length ? this.currentElement+1 : 0; 
    this.changeSlide(i); 
}, 

changeSlide: function(i){ 
    //$(this.options.navigationContainer).addClass('preload'); 
    var cEl = this.currentElement; 
    this.elements[this.currentElement]['fx'].start({'opacity':0, 'left':1500}); 

    this.elements[i]['fx'].set({'left':0}); 
    this.elements[i]['fx'].start({'opacity':1, 'top':[500,0]}).chain(function(){ 
     //$(this.options.navigationContainer).removeClass('preload');   
    }.bind(this)); 

    this.elements[this.currentElement]['nav'].removeClass('selected'); 
    this.elements[i]['nav'].addClass('selected'); 

    this.currentElement = i; 
}}) 

これは、ページで使用する方法ですページ。各スライドは、左の写真と右の説明で構成されています。私は必要なもの

はスライドが同じように動作させるためであるが、左側の画像は、現在のように表示されていない必要があり、それは、フェードインスライドがロードされたとき、表示されませんが、フェードインする必要があります。

説明テキストがスライドし、次に左の画像が表示されます。

各スライドの構造は次のとおりです。

<div class='slide'> 
    <div class="yjsquare"> 
     <div class="yjsquare_in"> 
     <img src='src here' alt=''/><h1>H1 text here</h1><p>description here</p> 
     </div> 
    </div> 
</div> 

は解決策を聞いて幸せになります。ありがとう。

Answer 1

このクラスは次のように書かれていませんが、onStartとonCompleteのようなイベントは許可されません。論理的なアプローチは、いくつかのイベントを発射するchangeSlide方法を変更するために、次のようになります。

MooSlider.implement(new Events); 

：

// add 
var el = this.elements[i]['fx']; 
this.fireEvent("start", el); 

// use el as reference... 
el.start({'opacity':1, 'top':[500,0]}).chain(function(){ 
     //$(this.options.navigationContainer).removeClass('preload');   
    // add 
    this.fireEvent("complete", el); 
}.bind(this)); 

は確かにあなたのクラスはまた、（メモリが提供する場合1.12で、そのように行われます）イベントを実装していることを確認してください

あなたは1.12と1.2+のコードの組み合わせを使用しています。これは奇妙です。

：

Implements: [Events], 

これはあなたがクラスを扇動すると、いくつかのコールバック・ロジックを追加することができます：いずれの場合では、あなたがしなければ、代わりにクラス宣言にこれを追加します（joomlaのは、通常はありません前に1.6にある）1.2を持っています

new MooSlider({ 
    container:'topslider', 
    slides:'.slide', 
    navs:'.navigator ul li', 

    effectDuration: 1000, 
    fromTop:500, 
    topDist:500, 
    slideDelay: 3000, 
    onStart: function(el) { 
     el.getElement("img").setOpacity(0); // hide it during animation 
    }, 
    onComplete: function(el) { 
     el.fade(1); // fade it in when done 
    } 
}); 

あなたは実際にオプションを実装し、現在の$ extendではなくthis.setOptions(options)を使用するべきです。

p.s. onStartコードとonCompleteコードのコールバックは例です.HTMLやUIの設定に合わせて調整する必要があります。