Настройки слайдера Mootools

Question

Я новичок в MooTools.У меня есть сайт Joomla с MooSlider:

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;
}})

Вот как он используется на странице:

<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

Вы можете увидеть слайдер в верхней части страницы.Каждый слайд состоит из рисунка слева и описания справа.

Мне нужно, чтобы слайды работали одинаково, но изображение на левой стороне не должно отображаться текущим способом, оно должно исчезать, когдаслайд загружен, не появляется, но затухает.

Текстовые слайды описания, а затем на левом рисунке появляется.

Структура каждого слайда:

<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 для запуска некоторых событий:

// 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 выполняется так, если память служит):

MooSlider.implement(new Events);

вы используете смесь из кода 1.12 и 1.2+, что является странным.В любом случае, если у вас есть 1.2 (joomla обычно не до 1.6), тогда вместо этого добавьте это в объявление класса:

Implements: [Events],

, это позволит вам добавить некоторую логику обратного вызова при возбуждении класса:

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
    }
});

вы должны действительно реализовать Options и использовать this.setOptions(options) вместо вашего текущего $ extend.

ps примеры обратного вызова кода onStart и onComplete, вам может потребоваться настроить его для соответствияваши предпочтения HTML и пользовательского интерфейса.