Joomla YJK2Slider Fx问题

时间:2013-05-02 14:09:19

标签: javascript jquery joomla joomla-k2 mootools-fx

我已经购买了Joomla的扩展程序!来自YouJoomla,因为他们的支持论是人类创造的最糟糕的事情,我想我会问你们。

我遇到的主要问题是Fx问题,或者可能是javascript冲突。

我试图通过名为YJK2Slider的插件向Joomla中的K2对象添加图像滑块。我应该做的唯一事情是安装插件,激活它,它应该工作正常。是的,但没有。它在加载时卡住并呈现图像0x0像素。然而,当我删除控制台告诉我的代码冲突时,它会加载图像,我可以从左向右滚动,但我不能使用缩略图,这几乎是一个关键功能。

这是滑块的完整js代码......

var YJK2SimpleSlide = new Class({
    Implements: [Options],
    options: {
            outerContainer: null,
            innerContainer: null,
            elements: null,
            navigation: {
                forward: null,
                back: null,
                container: null,
                elements: null,
                outer: null,
                visibleItems: 0
            },
            slideType: 0,
            orientation: 1,
            slideTime: 3000,
            duration: 600,
            tooltips: 0,
            autoslide: 1,
            navInfo: null,
            navLinks: null,
            startElem: null
        },

    initialize: function(options) {
        this.setOptions(options);       
        this.navElements = $(this.options.navigation.container).getElements(this.options.navigation.elements);
        this.navScroll = new Fx.Scroll(this.options.navigation.outer, {
            link: 'cancel',
            duration: 800,
            transition: Fx.Transitions.Quad.easeInOut
        });
        this.correction = Math.round(this.options.navigation.visibleItems / 2.00001);
        this.start()
    },

    start: function(){
        this.currentElement = this.options.startElem;   
        this.direction = 1; // -1: back; 1:forward
        this.elements = $(this.options.innerContainer).getElements(this.options.elements);

        this.showEffect = {};
        this.hideEffect = {};
        this.firstRun = {};

        if( this.options.slideType!==0 ){
            if( this.options.orientation == 1 ){
                this.showEffect.left = [1200,0];
                this.hideEffect.left = [0,1200];
                this.firstRun.left = 1200;
            }else{
                this.showEffect.top = [400,0];
                this.hideEffect.top = [0,400];
                this.firstRun.top = 400;
            }
        }
        if( this.options.slideType!==1 ){
            this.showEffect.opacity = [0,1];
            this.hideEffect.opacity = [1,0];
            this.firstRun.opacity = 0;
        }

var fadeSliderIn = new Fx.Morph(this.options.outerContainer, {
    duration: 3000,
    transition: Fx.Transitions.Sine.easeOut
});

fadeSliderIn.start({
    'visibility': 'visible',
    'opacity': [0.001, 1]
}); 
var fadeNavIn = new Fx.Morph(this.options.navigation.container, {
    duration: 3000,
    transition: Fx.Transitions.Sine.easeOut
}); 
fadeNavIn.start({
    'visibility': 'visible',
    'opacity': [0.001, 1]
}); 
        /* slides */
        this.elements.each( function(el, i){            

            el.setStyles({
                'display':'block',
                'position':'absolute',
                'top':0,
                'left':0,
                'z-index':(100-i)
            }); 

            if( this.options.slideType!==1 && i!==this.currentElement  )
                el.setStyle('opacity',0);

            this.elements[i]['fx'] = new Fx.Morph(el, {link:'cancel', duration: this.options.duration});

            if(i!==this.currentElement)
                this.elements[i]['fx'].set(this.firstRun);

            el.addEvent('mouseenter', function(event){
                //$clear(this.period);
                clearTimeout(this.period);
            }.bind(this));
            el.addEvent('mouseleave', function(event){
                if(this.options.autoslide==1){
                    this.resetAutoslide();
                }
            }.bind(this));

        }.bind(this));
        /* autoslide on command */
        if(this.options.autoslide == 1){
            this.period = this.rotateSlides.periodical(this.options.slideTime, this);
        }
        /* add navigation */
        this.setNavigation();

        if(this.options.navLinks){
            this.secondNavigation();
            $(this.options.navigation.container).addEvent('mousewheel', function(event){
                event = new Event(event);
                //event.stop();
                event.preventDefault();
                      var dir = event.wheel > 0 ? 1 : -1;
                      var el = this.currentElement - dir;
                //var el = this.currentElement-event.wheel;
                if( event.wheel > 0 && el < 0 ) el = this.navElements.length-1;
                if( event.wheel < 0 && el > this.navElements.length-1 ) el = 0;
                if( this.options.autoslide == 1 ){
                    //$clear(this.period);
                    clearTimeout(this.period);
                    this.resetAutoslide();
                }
                this.nextSlide(el);                 
            }.bind(this));  
        }
    },

    rotateSlides: function(){
        var next = this.currentElement+this.direction;
        if( next < 0 ) next = this.elements.length-1;
        if( next >  this.elements.length-1) next = 0;
        this.nextSlide(next);   
    },

    nextSlide: function(slide){
        if(slide==this.currentElement) return;
        this.elements[this.currentElement]['fx'].start(this.hideEffect);
        this.elements[slide]['fx'].start(this.showEffect);

        this.currentElement = slide;

        if($(this.options.navInfo)){
            $(this.options.navInfo).setHTML('Link '+(slide+1)+' of '+this.elements.length);
        }

        //if($defined(this.navElements)){
        if(this.navElements !== undefined && this.navElements !== null){            
            this.navElements.removeClass('selected');
            this.navElements[slide].addClass('selected');

            /* slide to element */
            var navTo = slide-this.correction < 0 ? 0 : slide-this.correction;  
            if( navTo+this.correction >= this.navElements.length-this.correction ) navTo = (this.navElements.length-1) - this.correction*2;
            this.navScroll.toElement(this.navElements[navTo]);

        }

    },

    setNavigation: function(){
        if(!$(this.options.navigation.forward)) return;

        $(this.options.navigation.forward).addEvent('click', function(event){
            //new Event(event).stop();
            event.preventDefault();
            this.direction = 1;
            if (this.options.autoslide == 1) {
                this.resetAutoslide();  
            }
            this.rotateSlides();
        }.bind(this));

        $(this.options.navigation.back).addEvent('click', function(event){
            //new Event(event).stop();
            event.preventDefault();
            this.direction = -1;
            if (this.options.autoslide == 1) {
                this.resetAutoslide();
            }
            this.rotateSlides();
        }.bind(this));

    },

    resetAutoslide: function(){
        //$clear(this.period);
        clearTimeout(this.period);
        this.period = this.rotateSlides.periodical(this.options.slideTime, this);       
    },

    secondNavigation: function(){
        this.navElements = $$(this.options.navLinks);
        this.navElements.each(function(el,i){

            if( i == this.currentElement ){
                this.navScroll.toElement(el);
                el.addClass('selected');
            }

            el.addEvent('click', function(event){
                //new Event(event).stop();
                event.preventDefault();
                this.resetAutoslide();
                this.nextSlide(i);              
            }.bind(this));

        }.bind(this));

    }
});

window.addEvent('domready', function() {
   $$('#SimpleSlide_outer').setStyles({
       boxShadow: '0px 0px 3px 1px #d8d8d8',
       WebkitBoxShadow:'0px 0px 3px 1px #d8d8d8',
       MozBoxShadow:'0px 0px 3px 1px #d8d8d8'
    });
});

......这就是搞砸它的部分。

this.navScroll = new Fx.Scroll(this.options.navigation.outer, {
            link: 'cancel',
            duration: 800,
            transition: Fx.Transitions.Quad.easeInOut
        });

下面是我想放置滑块的链接; http://dev9.hosterspace.com/pyramiden/index.php/projekt/utbildning/item/4-campus-varberg 继承人开发者演示网站; http://extensions.youjoomla.info/yj-k2-image-slider.html

任何人都可以帮助我吗? :)

1 个答案:

答案 0 :(得分:0)

问题是我的Joomla!安装不包括默认应包含的mootools-more.js。当我添加它的东西是游泳的时候!