javascript - Joomla YJK2Slider Fx issue -
i've bought extension joomla! youjoomla , since supportforum worst thing ever created man, thought ask guys instead.
the main issue have fx problem, or possibly javascript conflict.
im trying add image slider k2 objects in joomla via plugin called yjk2slider. thing im supposed have install plugin, activate , should work fine. yeah, no. gets stuck on loading , renders images 0x0 pixels. when remove code console tells me conflict loads images , can scroll left right, cant use thumbnails pretty key feature.
this complete js code slider...
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 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( == 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' }); }); ...and parts screwes up.
this.navscroll = new fx.scroll(this.options.navigation.outer, { link: 'cancel', duration: 800, transition: fx.transitions.quad.easeinout }); heres link want put slider; http://dev9.hosterspace.com/pyramiden/index.php/projekt/utbildning/item/4-campus-varberg , heres developers demo site; http://extensions.youjoomla.info/yj-k2-image-slider.html
can me? :)
the problem joomla! installation did not include mootools-more.js should included default. when added things worked swimmingly!
Comments
Post a Comment