2013-05-02 64 views
0

我买了一个扩展到Joomla!来自YouJoomla,由于他们的支持论坛是人类创造的最糟糕的事情,所以我想我会问你们。Joomla YJK2Slider FX问题

我遇到的主要问题是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' 
    }); 
}); 

...这是部分是screwes起来。

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

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

+0

类型错误:Fx.Scroll是不是构造 [打破这个错误] \t 过渡:Fx.Transitions.Quad.easeInOut - 这是调试器说什么。你有合适的Mootools版本吗? – philipp 2013-05-02 14:56:31

+0

我相信你使用的是1.0版本的插件,最新版本是1.0.2。尝试更新插件,看看是否可以解决问题 – Lodder 2013-05-02 14:57:28

+0

@ philipp,我的开发者在他们的演示页面上有相同的Mootools版本,你知道它应该是哪个版本,所以我可以重新检查吗? – karllindval 2013-05-03 06:40:03

回答

0

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