Mootools 슬라이더 조정

Question

mootools를 처음 사용했습니다. 나는 MooSlider와 줌라 사이트가 :

<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과 같은 이벤트는 통과 할 수 없습니다.

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에있는, 그래서 같이 수행)를 구현 있는지 확인하십시오 논리적 인 접근 방식은 몇 가지 이벤트를 발생하는 changeSlide 방법을 수정하는 것

당신은 홀수 인 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 기본 설정에 맞게이 설정을 조정해야 할 수도 있습니다.