JavaScript - Plugins
Aus Wikizone
Libraries und Plugins für JavaScript
Images Loaded
Testen ob alle Bilder geladen sind, um dann weitere Funktionen auzuführen.
Animation
CreateJS
Tools für Animation und Interaktion
jQuery Appear
This plugin can be used to prevent unnecessary processeing for content that is hidden or is outside of the browser viewport.
It implements a custom appear/disappear events which are fired when an element became visible/invisible in the browser viewport.
Neue Version: https://github.com/morr/jquery.appear
Alte Version:
/*
* jQuery.appear
* http://code.google.com/p/jquery-appear/
*
* Copyright (c) 2009 Michael Hixson
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
*/
(function($){$.fn.appear=function(f,o){var s=$.extend({one:true},o);return this.each(function(){var t=$(this);t.appeared=false;if(!f){t.trigger('appear',s.data);return;}var w=$(window);var c=function(){if(!t.is(':visible')){t.appeared=false;return;}var a=w.scrollLeft();var b=w.scrollTop();var o=t.offset();var x=o.left;var y=o.top;if(y+t.height()>=b&&y<=b+w.height()&&x+t.width()>=a&&x<=a+w.width()){if(!t.appeared)t.trigger('appear',s.data);}else{t.appeared=false;}};var m=function(){t.appeared=true;if(s.one){w.unbind('scroll',c);var i=$.inArray(c,$.fn.appear.checks);if(i>=0)$.fn.appear.checks.splice(i,1);}f.apply(this,arguments);};if(s.one)t.one('appear',s.data,m);else t.bind('appear',s.data,m);w.scroll(c);$.fn.appear.checks.push(c);(c)();});};$.extend($.fn.appear,{checks:[],timeout:null,checkAll:function(){var l=$.fn.appear.checks.length;if(l>0)while(l--)($.fn.appear.checks[l])();},run:function(){if($.fn.appear.timeout)clearTimeout($.fn.appear.timeout);$.fn.appear.timeout=setTimeout($.fn.appear.checkAll,20);}});$.each(['append','prepend','after','before','attr','removeAttr','addClass','removeClass','toggleClass','remove','css','show','hide'],function(i,n){var u=$.fn[n];if(u){$.fn[n]=function(){var r=u.apply(this,arguments);$.fn.appear.run();return r;}}});})(jQuery);
jQuery Easing
/*
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
* MIT License
*/
jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});
Simple Text Rotator
// Simple Text Rotator
!function(e){var t={animation:"dissolve",separator:",",speed:2e3};e.fn.textrotator=function(n){var r=e.extend({},t,n);return this.each(function(){var t=e(this);var n=[];e.each(t.text().split(r.separator),function(e,t){n.push(t)});t.text(n[0]);var i=function(){switch(r.animation){case"dissolve":t.animate({textShadowBlur:20,opacity:0},500,function(){s=e.inArray(t.text(),n);if(s+1==n.length)s=-1;t.text(n[s+1]).animate({textShadowBlur:0,opacity:1},500)});break;case"flip":if(t.find(".back").length>0){t.html(t.find(".back").html())}var i=t.text();var s=e.inArray(i,n);if(s+1==n.length)s=-1;t.html("");e("<span class='front'>"+i+"</span>").appendTo(t);e("<span class='back'>"+n[s+1]+"</span>").appendTo(t);t.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip").show().css({"-webkit-transform":" rotateY(-180deg)","-moz-transform":" rotateY(-180deg)","-o-transform":" rotateY(-180deg)",transform:" rotateY(-180deg)"});break;case"flipUp":if(t.find(".back").length>0){t.html(t.find(".back").html())}var i=t.text();var s=e.inArray(i,n);if(s+1==n.length)s=-1;t.html("");e("<span class='front'>"+i+"</span>").appendTo(t);e("<span class='back'>"+n[s+1]+"</span>").appendTo(t);t.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip up").show().css({"-webkit-transform":" rotateX(-180deg)","-moz-transform":" rotateX(-180deg)","-o-transform":" rotateX(-180deg)",transform:" rotateX(-180deg)"});break;case"flipCube":if(t.find(".back").length>0){t.html(t.find(".back").html())}var i=t.text();var s=e.inArray(i,n);if(s+1==n.length)s=-1;t.html("");e("<span class='front'>"+i+"</span>").appendTo(t);e("<span class='back'>"+n[s+1]+"</span>").appendTo(t);t.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip cube").show().css({"-webkit-transform":" rotateY(180deg)","-moz-transform":" rotateY(180deg)","-o-transform":" rotateY(180deg)",transform:" rotateY(180deg)"});break;case"flipCubeUp":if(t.find(".back").length>0){t.html(t.find(".back").html())}var i=t.text();var s=e.inArray(i,n);if(s+1==n.length)s=-1;t.html("");e("<span class='front'>"+i+"</span>").appendTo(t);e("<span class='back'>"+n[s+1]+"</span>").appendTo(t);t.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip cube up").show().css({"-webkit-transform":" rotateX(180deg)","-moz-transform":" rotateX(180deg)","-o-transform":" rotateX(180deg)",transform:" rotateX(180deg)"});break;case"spin":if(t.find(".rotating").length>0){t.html(t.find(".rotating").html())}s=e.inArray(t.text(),n);if(s+1==n.length)s=-1;t.wrapInner("<span class='rotating spin' />").find(".rotating").hide().text(n[s+1]).show().css({"-webkit-transform":" rotate(0) scale(1)","-moz-transform":"rotate(0) scale(1)","-o-transform":"rotate(0) scale(1)",transform:"rotate(0) scale(1)"});break;case"fade":t.fadeOut(r.speed,function(){s=e.inArray(t.text(),n);if(s+1==n.length)s=-1;t.text(n[s+1]).fadeIn(r.speed)});break}};setInterval(i,r.speed)})}}(window.jQuery)
Wow Reveal Animations
Kostenpflichtig für kommerzielle Seiten. Developer Lizenz ca 99$. Enthalten z.B. bei angelajochum.de. Kann kostenlos geladen werden zum testen.
https://github.com/matthieua/WOW
http://mynameismatthieu.com/WOW/index.html
Flippy Text Effekt
https://github.com/yemM/flippy
Verwendet in Hera Template
Parallax
Stellar.js
http://markdalgleish.com/projects/stellar.js/
http://markdalgleish.com/projects/stellar.js/docs/
/*! Stellar.js v0.6.2 | Copyright 2014, Mark Dalgleish | http://markdalgleish.com/projects/stellar.js | http://markdalgleish.mit-license.org */
!function(a,b,c,d){function e(b,c){this.element=b,this.options=a.extend({},g,c),this._defaults=g,this._name=f,this.init()}var f="stellar",g={scrollProperty:"scroll",positionProperty:"position",horizontalScrolling:!0,verticalScrolling:!0,horizontalOffset:0,verticalOffset:0,responsive:!1,parallaxBackgrounds:!0,parallaxElements:!0,hideDistantElements:!0,hideElement:function(a){a.hide()},showElement:function(a){a.show()}},h={scroll:{getLeft:function(a){return a.scrollLeft()},setLeft:function(a,b){a.scrollLeft(b)},getTop:function(a){return a.scrollTop()},setTop:function(a,b){a.scrollTop(b)}},position:{getLeft:function(a){return-1*parseInt(a.css("left"),10)},getTop:function(a){return-1*parseInt(a.css("top"),10)}},margin:{getLeft:function(a){return-1*parseInt(a.css("margin-left"),10)},getTop:function(a){return-1*parseInt(a.css("margin-top"),10)}},transform:{getLeft:function(a){var b=getComputedStyle(a[0])[k];return"none"!==b?-1*parseInt(b.match(/(-?[0-9]+)/g)[4],10):0},getTop:function(a){var b=getComputedStyle(a[0])[k];return"none"!==b?-1*parseInt(b.match(/(-?[0-9]+)/g)[5],10):0}}},i={position:{setLeft:function(a,b){a.css("left",b)},setTop:function(a,b){a.css("top",b)}},transform:{setPosition:function(a,b,c,d,e){a[0].style[k]="translate3d("+(b-c)+"px, "+(d-e)+"px, 0)"}}},j=function(){var b,c=/^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/,d=a("script")[0].style,e="";for(b in d)if(c.test(b)){e=b.match(c)[0];break}return"WebkitOpacity"in d&&(e="Webkit"),"KhtmlOpacity"in d&&(e="Khtml"),function(a){return e+(e.length>0?a.charAt(0).toUpperCase()+a.slice(1):a)}}(),k=j("transform"),l=a("<div />",{style:"background:#fff"}).css("background-position-x")!==d,m=l?function(a,b,c){a.css({"background-position-x":b,"background-position-y":c})}:function(a,b,c){a.css("background-position",b+" "+c)},n=l?function(a){return[a.css("background-position-x"),a.css("background-position-y")]}:function(a){return a.css("background-position").split(" ")},o=b.requestAnimationFrame||b.webkitRequestAnimationFrame||b.mozRequestAnimationFrame||b.oRequestAnimationFrame||b.msRequestAnimationFrame||function(a){setTimeout(a,1e3/60)};e.prototype={init:function(){this.options.name=f+"_"+Math.floor(1e9*Math.random()),this._defineElements(),this._defineGetters(),this._defineSetters(),this._handleWindowLoadAndResize(),this._detectViewport(),this.refresh({firstLoad:!0}),"scroll"===this.options.scrollProperty?this._handleScrollEvent():this._startAnimationLoop()},_defineElements:function(){this.element===c.body&&(this.element=b),this.$scrollElement=a(this.element),this.$element=this.element===b?a("body"):this.$scrollElement,this.$viewportElement=this.options.viewportElement!==d?a(this.options.viewportElement):this.$scrollElement[0]===b||"scroll"===this.options.scrollProperty?this.$scrollElement:this.$scrollElement.parent()},_defineGetters:function(){var a=this,b=h[a.options.scrollProperty];this._getScrollLeft=function(){return b.getLeft(a.$scrollElement)},this._getScrollTop=function(){return b.getTop(a.$scrollElement)}},_defineSetters:function(){var b=this,c=h[b.options.scrollProperty],d=i[b.options.positionProperty],e=c.setLeft,f=c.setTop;this._setScrollLeft="function"==typeof e?function(a){e(b.$scrollElement,a)}:a.noop,this._setScrollTop="function"==typeof f?function(a){f(b.$scrollElement,a)}:a.noop,this._setPosition=d.setPosition||function(a,c,e,f,g){b.options.horizontalScrolling&&d.setLeft(a,c,e),b.options.verticalScrolling&&d.setTop(a,f,g)}},_handleWindowLoadAndResize:function(){var c=this,d=a(b);c.options.responsive&&d.bind("load."+this.name,function(){c.refresh()}),d.bind("resize."+this.name,function(){c._detectViewport(),c.options.responsive&&c.refresh()})},refresh:function(c){var d=this,e=d._getScrollLeft(),f=d._getScrollTop();c&&c.firstLoad||this._reset(),this._setScrollLeft(0),this._setScrollTop(0),this._setOffsets(),this._findParticles(),this._findBackgrounds(),c&&c.firstLoad&&/WebKit/.test(navigator.userAgent)&&a(b).load(function(){var a=d._getScrollLeft(),b=d._getScrollTop();d._setScrollLeft(a+1),d._setScrollTop(b+1),d._setScrollLeft(a),d._setScrollTop(b)}),this._setScrollLeft(e),this._setScrollTop(f)},_detectViewport:function(){var a=this.$viewportElement.offset(),b=null!==a&&a!==d;this.viewportWidth=this.$viewportElement.width(),this.viewportHeight=this.$viewportElement.height(),this.viewportOffsetTop=b?a.top:0,this.viewportOffsetLeft=b?a.left:0},_findParticles:function(){{var b=this;this._getScrollLeft(),this._getScrollTop()}if(this.particles!==d)for(var c=this.particles.length-1;c>=0;c--)this.particles[c].$element.data("stellar-elementIsActive",d);this.particles=[],this.options.parallaxElements&&this.$element.find("[data-stellar-ratio]").each(function(){var c,e,f,g,h,i,j,k,l,m=a(this),n=0,o=0,p=0,q=0;if(m.data("stellar-elementIsActive")){if(m.data("stellar-elementIsActive")!==this)return}else m.data("stellar-elementIsActive",this);b.options.showElement(m),m.data("stellar-startingLeft")?(m.css("left",m.data("stellar-startingLeft")),m.css("top",m.data("stellar-startingTop"))):(m.data("stellar-startingLeft",m.css("left")),m.data("stellar-startingTop",m.css("top"))),f=m.position().left,g=m.position().top,h="auto"===m.css("margin-left")?0:parseInt(m.css("margin-left"),10),i="auto"===m.css("margin-top")?0:parseInt(m.css("margin-top"),10),k=m.offset().left-h,l=m.offset().top-i,m.parents().each(function(){var b=a(this);return b.data("stellar-offset-parent")===!0?(n=p,o=q,j=b,!1):(p+=b.position().left,void(q+=b.position().top))}),c=m.data("stellar-horizontal-offset")!==d?m.data("stellar-horizontal-offset"):j!==d&&j.data("stellar-horizontal-offset")!==d?j.data("stellar-horizontal-offset"):b.horizontalOffset,e=m.data("stellar-vertical-offset")!==d?m.data("stellar-vertical-offset"):j!==d&&j.data("stellar-vertical-offset")!==d?j.data("stellar-vertical-offset"):b.verticalOffset,b.particles.push({$element:m,$offsetParent:j,isFixed:"fixed"===m.css("position"),horizontalOffset:c,verticalOffset:e,startingPositionLeft:f,startingPositionTop:g,startingOffsetLeft:k,startingOffsetTop:l,parentOffsetLeft:n,parentOffsetTop:o,stellarRatio:m.data("stellar-ratio")!==d?m.data("stellar-ratio"):1,width:m.outerWidth(!0),height:m.outerHeight(!0),isHidden:!1})})},_findBackgrounds:function(){var b,c=this,e=this._getScrollLeft(),f=this._getScrollTop();this.backgrounds=[],this.options.parallaxBackgrounds&&(b=this.$element.find("[data-stellar-background-ratio]"),this.$element.data("stellar-background-ratio")&&(b=b.add(this.$element)),b.each(function(){var b,g,h,i,j,k,l,o=a(this),p=n(o),q=0,r=0,s=0,t=0;if(o.data("stellar-backgroundIsActive")){if(o.data("stellar-backgroundIsActive")!==this)return}else o.data("stellar-backgroundIsActive",this);o.data("stellar-backgroundStartingLeft")?m(o,o.data("stellar-backgroundStartingLeft"),o.data("stellar-backgroundStartingTop")):(o.data("stellar-backgroundStartingLeft",p[0]),o.data("stellar-backgroundStartingTop",p[1])),h="auto"===o.css("margin-left")?0:parseInt(o.css("margin-left"),10),i="auto"===o.css("margin-top")?0:parseInt(o.css("margin-top"),10),j=o.offset().left-h-e,k=o.offset().top-i-f,o.parents().each(function(){var b=a(this);return b.data("stellar-offset-parent")===!0?(q=s,r=t,l=b,!1):(s+=b.position().left,void(t+=b.position().top))}),b=o.data("stellar-horizontal-offset")!==d?o.data("stellar-horizontal-offset"):l!==d&&l.data("stellar-horizontal-offset")!==d?l.data("stellar-horizontal-offset"):c.horizontalOffset,g=o.data("stellar-vertical-offset")!==d?o.data("stellar-vertical-offset"):l!==d&&l.data("stellar-vertical-offset")!==d?l.data("stellar-vertical-offset"):c.verticalOffset,c.backgrounds.push({$element:o,$offsetParent:l,isFixed:"fixed"===o.css("background-attachment"),horizontalOffset:b,verticalOffset:g,startingValueLeft:p[0],startingValueTop:p[1],startingBackgroundPositionLeft:isNaN(parseInt(p[0],10))?0:parseInt(p[0],10),startingBackgroundPositionTop:isNaN(parseInt(p[1],10))?0:parseInt(p[1],10),startingPositionLeft:o.position().left,startingPositionTop:o.position().top,startingOffsetLeft:j,startingOffsetTop:k,parentOffsetLeft:q,parentOffsetTop:r,stellarRatio:o.data("stellar-background-ratio")===d?1:o.data("stellar-background-ratio")})}))},_reset:function(){var a,b,c,d,e;for(e=this.particles.length-1;e>=0;e--)a=this.particles[e],b=a.$element.data("stellar-startingLeft"),c=a.$element.data("stellar-startingTop"),this._setPosition(a.$element,b,b,c,c),this.options.showElement(a.$element),a.$element.data("stellar-startingLeft",null).data("stellar-elementIsActive",null).data("stellar-backgroundIsActive",null);for(e=this.backgrounds.length-1;e>=0;e--)d=this.backgrounds[e],d.$element.data("stellar-backgroundStartingLeft",null).data("stellar-backgroundStartingTop",null),m(d.$element,d.startingValueLeft,d.startingValueTop)},destroy:function(){this._reset(),this.$scrollElement.unbind("resize."+this.name).unbind("scroll."+this.name),this._animationLoop=a.noop,a(b).unbind("load."+this.name).unbind("resize."+this.name)},_setOffsets:function(){var c=this,d=a(b);d.unbind("resize.horizontal-"+this.name).unbind("resize.vertical-"+this.name),"function"==typeof this.options.horizontalOffset?(this.horizontalOffset=this.options.horizontalOffset(),d.bind("resize.horizontal-"+this.name,function(){c.horizontalOffset=c.options.horizontalOffset()})):this.horizontalOffset=this.options.horizontalOffset,"function"==typeof this.options.verticalOffset?(this.verticalOffset=this.options.verticalOffset(),d.bind("resize.vertical-"+this.name,function(){c.verticalOffset=c.options.verticalOffset()})):this.verticalOffset=this.options.verticalOffset},_repositionElements:function(){var a,b,c,d,e,f,g,h,i,j,k=this._getScrollLeft(),l=this._getScrollTop(),n=!0,o=!0;if(this.currentScrollLeft!==k||this.currentScrollTop!==l||this.currentWidth!==this.viewportWidth||this.currentHeight!==this.viewportHeight){for(this.currentScrollLeft=k,this.currentScrollTop=l,this.currentWidth=this.viewportWidth,this.currentHeight=this.viewportHeight,j=this.particles.length-1;j>=0;j--)a=this.particles[j],b=a.isFixed?1:0,this.options.horizontalScrolling?(f=(k+a.horizontalOffset+this.viewportOffsetLeft+a.startingPositionLeft-a.startingOffsetLeft+a.parentOffsetLeft)*-(a.stellarRatio+b-1)+a.startingPositionLeft,h=f-a.startingPositionLeft+a.startingOffsetLeft):(f=a.startingPositionLeft,h=a.startingOffsetLeft),this.options.verticalScrolling?(g=(l+a.verticalOffset+this.viewportOffsetTop+a.startingPositionTop-a.startingOffsetTop+a.parentOffsetTop)*-(a.stellarRatio+b-1)+a.startingPositionTop,i=g-a.startingPositionTop+a.startingOffsetTop):(g=a.startingPositionTop,i=a.startingOffsetTop),this.options.hideDistantElements&&(o=!this.options.horizontalScrolling||h+a.width>(a.isFixed?0:k)&&h<(a.isFixed?0:k)+this.viewportWidth+this.viewportOffsetLeft,n=!this.options.verticalScrolling||i+a.height>(a.isFixed?0:l)&&i<(a.isFixed?0:l)+this.viewportHeight+this.viewportOffsetTop),o&&n?(a.isHidden&&(this.options.showElement(a.$element),a.isHidden=!1),this._setPosition(a.$element,f,a.startingPositionLeft,g,a.startingPositionTop)):a.isHidden||(this.options.hideElement(a.$element),a.isHidden=!0);for(j=this.backgrounds.length-1;j>=0;j--)c=this.backgrounds[j],b=c.isFixed?0:1,d=this.options.horizontalScrolling?(k+c.horizontalOffset-this.viewportOffsetLeft-c.startingOffsetLeft+c.parentOffsetLeft-c.startingBackgroundPositionLeft)*(b-c.stellarRatio)+"px":c.startingValueLeft,e=this.options.verticalScrolling?(l+c.verticalOffset-this.viewportOffsetTop-c.startingOffsetTop+c.parentOffsetTop-c.startingBackgroundPositionTop)*(b-c.stellarRatio)+"px":c.startingValueTop,m(c.$element,d,e)}},_handleScrollEvent:function(){var a=this,b=!1,c=function(){a._repositionElements(),b=!1},d=function(){b||(o(c),b=!0)};this.$scrollElement.bind("scroll."+this.name,d),d()},_startAnimationLoop:function(){var a=this;this._animationLoop=function(){o(a._animationLoop),a._repositionElements()},this._animationLoop()}},a.fn[f]=function(b){var c=arguments;return b===d||"object"==typeof b?this.each(function(){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))}):"string"==typeof b&&"_"!==b[0]&&"init"!==b?this.each(function(){var d=a.data(this,"plugin_"+f);d instanceof e&&"function"==typeof d[b]&&d[b].apply(d,Array.prototype.slice.call(c,1)),"destroy"===b&&a.data(this,"plugin_"+f,null)}):void 0},a[f]=function(){var c=a(b);return c.stellar.apply(c,Array.prototype.slice.call(arguments,0))},a[f].scrollProperty=h,a[f].positionProperty=i,b.Stellar=e}(jQuery,this,document);
Lightbox, Gallery & co
Chocolat
Nette responsive Lightbox für Anfänger und Profis
Lightbox
Der Klassiker: Lightbox jQuery Plugin
Magnific Popup
Galt lange als DER Nachfolger der Lightbox Magnific Popup jQuery Plugin
Isotope / Masonry
JavaScript - Masonry / Isotope
Charts / Counter
jQuery CountTo
// jQuery CountTo
!function(t){"use strict";function e(t,e){return t.toFixed(e.decimals)}t.fn.countTo=function(e){return e=e||{},t(this).each(function(){function a(){s+=l,c++,n(s),"function"==typeof o.onUpdate&&o.onUpdate.call(i,s),c>=r&&(f.removeData("countTo"),clearInterval(d.interval),s=o.to,"function"==typeof o.onComplete&&o.onComplete.call(i,s))}function n(t){var e=o.formatter.call(i,t,o);f.text(e)}var o=t.extend({},t.fn.countTo.defaults,{from:t(this).data("from"),to:t(this).data("to"),speed:t(this).data("speed"),refreshInterval:t(this).data("refresh-interval"),decimals:t(this).data("decimals")},e),r=Math.ceil(o.speed/o.refreshInterval),l=(o.to-o.from)/r,i=this,f=t(this),c=0,s=o.from,d=f.data("countTo")||{};f.data("countTo",d),d.interval&&clearInterval(d.interval),d.interval=setInterval(a,o.refreshInterval),n(s)})},t.fn.countTo.defaults={from:0,to:0,speed:1e3,refreshInterval:100,decimals:0,formatter:e,onUpdate:null,onComplete:null}}(jQuery);
Easy Pie Chart
/**!
* easyPieChart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.6
**/
!function(a,b){"object"==typeof exports?module.exports=b(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],b):b(a.jQuery)}(this,function(a){var b=function(a,b){var c,d=document.createElement("canvas");a.appendChild(d),"undefined"!=typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size;var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var d=24;d>0;--d)d%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.trackWidth||b.lineWidth,1)};this.getCanvas=function(){return d},this.getCtx=function(){return e},this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},c=function(a,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,trackWidth:void 0,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(){},onStep:function(){},onStop:function(){}};if("undefined"!=typeof b)d.renderer=b;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=a,this.options=e;for(var b in d)d.hasOwnProperty(b)&&(e[b]=c&&"undefined"!=typeof c[b]?c[b]:d[b],"function"==typeof e[b]&&(e[b]=e[b].bind(this)));e.easing="string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?jQuery.easing[e.easing]:d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(a,e),this.renderer.draw(f),a.dataset&&a.dataset.percent?this.update(parseFloat(a.dataset.percent)):a.getAttribute&&a.getAttribute("data-percent")&&this.update(parseFloat(a.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()};a.fn.easyPieChart=function(b){return this.each(function(){var d;a.data(this,"easyPieChart")||(d=a.extend({},b,a(this).data()),a.data(this,"easyPieChart",new c(this,d)))})}});
Video
FitVids
Embedding Videos from YouTube, Vimeo,...
FitVids jQuery Plugin https://github.com/davatron5000/FitVids.js
Vide - Video Backgrounds
/*
* Vide - v0.5.1
* Easy as hell jQuery plugin for video backgrounds.
* http://vodkabears.github.io/vide/
*
* Made by Ilya Makarov
* Under MIT License
*/
!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],b):b("object"==typeof exports?require("jquery"):a.jQuery)}(this,function(a){"use strict";function b(a){var b,c,d,e,f,g,h,i={};for(f=a.replace(/\s*:\s*/g,":").replace(/\s*,\s*/g,",").split(","),h=0,g=f.length;h<g&&(c=f[h],c.search(/^(http|https|ftp):\/\//)===-1&&c.search(":")!==-1);h++)b=c.indexOf(":"),d=c.substring(0,b),e=c.substring(b+1),e||(e=void 0),"string"==typeof e&&(e="true"===e||"false"!==e&&e),"string"==typeof e&&(e=isNaN(e)?e:+e),i[d]=e;return null==d&&null==e?a:i}function c(a){a=""+a;var b,c,d,e=a.split(/\s+/),f="50%",g="50%";for(d=0,b=e.length;d<b;d++)c=e[d],"left"===c?f="0%":"right"===c?f="100%":"top"===c?g="0%":"bottom"===c?g="100%":"center"===c?0===d?f="50%":g="50%":0===d?f=c:g=c;return{x:f,y:g}}function d(b,c){var d=function(){c(this.src)};a('<img src="'+b+'.gif">').on("load",d),a('<img src="'+b+'.jpg">').on("load",d),a('<img src="'+b+'.jpeg">').on("load",d),a('<img src="'+b+'.png">').on("load",d)}function e(c,d,e){if(this.$element=a(c),"string"==typeof d&&(d=b(d)),e?"string"==typeof e&&(e=b(e)):e={},"string"==typeof d)d=d.replace(/\.\w*$/,"");else if("object"==typeof d)for(var f in d)d.hasOwnProperty(f)&&(d[f]=d[f].replace(/\.\w*$/,""));this.settings=a.extend({},g,e),this.path=d;try{this.init()}catch(i){if(i.message!==h)throw i}}var f="vide",g={volume:1,playbackRate:1,muted:!0,loop:!0,autoplay:!0,position:"50% 50%",posterType:"detect",resizing:!0,bgColor:"transparent",className:""},h="Not implemented";e.prototype.init=function(){var b,e,f=this,g=f.path,i=g,j="",k=f.$element,l=f.settings,m=c(l.position),n=l.posterType;e=f.$wrapper=a("<div>").addClass(l.className).css({position:"absolute","z-index":-1,top:0,left:0,bottom:0,right:0,overflow:"hidden","-webkit-background-size":"cover","-moz-background-size":"cover","-o-background-size":"cover","background-size":"cover","background-color":l.bgColor,"background-repeat":"no-repeat","background-position":m.x+" "+m.y}),"object"==typeof g&&(g.poster?i=g.poster:g.mp4?i=g.mp4:g.webm?i=g.webm:g.ogv&&(i=g.ogv)),"detect"===n?d(i,function(a){e.css("background-image","url("+a+")")}):"none"!==n&&e.css("background-image","url("+i+"."+n+")"),"static"===k.css("position")&&k.css("position","relative"),k.prepend(e),"object"==typeof g?(g.mp4&&(j+='<source src="'+g.mp4+'.mp4" type="video/mp4">'),g.webm&&(j+='<source src="'+g.webm+'.webm" type="video/webm">'),g.ogv&&(j+='<source src="'+g.ogv+'.ogv" type="video/ogg">'),b=f.$video=a("<video>"+j+"</video>")):b=f.$video=a('<video><source src="'+g+'.mp4" type="video/mp4"><source src="'+g+'.webm" type="video/webm"><source src="'+g+'.ogv" type="video/ogg"></video>');try{b.prop({autoplay:l.autoplay,loop:l.loop,volume:l.volume,muted:l.muted,defaultMuted:l.muted,playbackRate:l.playbackRate,defaultPlaybackRate:l.playbackRate})}catch(o){throw new Error(h)}b.css({margin:"auto",position:"absolute","z-index":-1,top:m.y,left:m.x,"-webkit-transform":"translate(-"+m.x+", -"+m.y+")","-ms-transform":"translate(-"+m.x+", -"+m.y+")","-moz-transform":"translate(-"+m.x+", -"+m.y+")",transform:"translate(-"+m.x+", -"+m.y+")",visibility:"hidden",opacity:0}).one("canplaythrough.vide",function(){f.resize()}).one("playing.vide",function(){b.css({visibility:"visible",opacity:1}),e.css("background-image","none")}),k.on("resize.vide",function(){l.resizing&&f.resize()}),e.append(b)},e.prototype.getVideoObject=function(){return this.$video[0]},e.prototype.resize=function(){if(this.$video){var a=this.$wrapper,b=this.$video,c=b[0],d=c.videoHeight,e=c.videoWidth,f=a.height(),g=a.width();g/e>f/d?b.css({width:g+2,height:"auto"}):b.css({width:"auto",height:f+2})}},e.prototype.destroy=function(){delete a[f].lookup[this.index],this.$video&&this.$video.off(f),this.$element.off(f).removeData(f),this.$wrapper.remove()},a[f]={lookup:[]},a.fn[f]=function(b,c){var d;return this.each(function(){d=a.data(this,f),d&&d.destroy(),d=new e(this,b,c),d.index=a[f].lookup.push(d)-1,a.data(this,f,d)}),this},a(document).ready(function(){var b=a(window);b.on("resize.vide",function(){for(var b,c=a[f].lookup.length,d=0;d<c;d++)b=a[f].lookup[d],b&&b.settings.resizing&&b.resize()}),b.on("unload.vide",function(){return!1}),a(document).find("[data-vide-bg]").each(function(b,c){var d=a(c),e=d.data("vide-options"),g=d.data("vide-bg");d[f](g,e)})})});
Vegas Slider
Siehe Extra Seite
Slider & Carousel
Slick Carousel & Slider
Der kann fast alles Slider. Gehört mit Owl Slider zu den vielseitigen.
http://kenwheeler.github.io/slick/
Owl Carousel
// Owl Carousel
"function"!=typeof Object.create&&(Object.create=function(t){function i(){}return i.prototype=t,new i}),function(t,i,s){var e={init:function(i,s){this.$elem=t(s),this.options=t.extend({},t.fn.owlCarousel.options,this.$elem.data(),i),this.userOptions=i,this.loadContent()},loadContent:function(){function i(t){var i,s="";if("function"==typeof e.options.jsonSuccess)e.options.jsonSuccess.apply(this,[t]);else{for(i in t.owl)t.owl.hasOwnProperty(i)&&(s+=t.owl[i].item);e.$elem.html(s)}e.logIn()}var s,e=this;"function"==typeof e.options.beforeInit&&e.options.beforeInit.apply(this,[e.$elem]),"string"==typeof e.options.jsonPath?(s=e.options.jsonPath,t.getJSON(s,i)):e.logIn()},logIn:function(){this.$elem.data("owl-originalStyles",this.$elem.attr("style")),this.$elem.data("owl-originalClasses",this.$elem.attr("class")),this.$elem.css({opacity:0}),this.orignalItems=this.options.items,this.checkBrowser(),this.wrapperWidth=0,this.checkVisible=null,this.setVars()},setVars:function(){return 0===this.$elem.children().length?!1:(this.baseClass(),this.eventTypes(),this.$userItems=this.$elem.children(),this.itemsAmount=this.$userItems.length,this.wrapItems(),this.$owlItems=this.$elem.find(".owl-item"),this.$owlWrapper=this.$elem.find(".owl-wrapper"),this.playDirection="next",this.prevItem=0,this.prevArr=[0],this.currentItem=0,this.customEvents(),void this.onStartup())},onStartup:function(){this.updateItems(),this.calculateAll(),this.buildControls(),this.updateControls(),this.response(),this.moveEvents(),this.stopOnHover(),this.owlStatus(),!1!==this.options.transitionStyle&&this.transitionTypes(this.options.transitionStyle),!0===this.options.autoPlay&&(this.options.autoPlay=5e3),this.play(),this.$elem.find(".owl-wrapper").css("display","block"),this.$elem.is(":visible")?this.$elem.css("opacity",1):this.watchVisibility(),this.onstartup=!1,this.eachMoveUpdate(),"function"==typeof this.options.afterInit&&this.options.afterInit.apply(this,[this.$elem])},eachMoveUpdate:function(){!0===this.options.lazyLoad&&this.lazyLoad(),!0===this.options.autoHeight&&this.autoHeight(),this.onVisibleItems(),"function"==typeof this.options.afterAction&&this.options.afterAction.apply(this,[this.$elem])},updateVars:function(){"function"==typeof this.options.beforeUpdate&&this.options.beforeUpdate.apply(this,[this.$elem]),this.watchVisibility(),this.updateItems(),this.calculateAll(),this.updatePosition(),this.updateControls(),this.eachMoveUpdate(),"function"==typeof this.options.afterUpdate&&this.options.afterUpdate.apply(this,[this.$elem])},reload:function(){var t=this;i.setTimeout(function(){t.updateVars()},0)},watchVisibility:function(){var t=this;return!1!==t.$elem.is(":visible")?!1:(t.$elem.css({opacity:0}),i.clearInterval(t.autoPlayInterval),i.clearInterval(t.checkVisible),void(t.checkVisible=i.setInterval(function(){t.$elem.is(":visible")&&(t.reload(),t.$elem.animate({opacity:1},200),i.clearInterval(t.checkVisible))},500)))},wrapItems:function(){this.$userItems.wrapAll('<div class="owl-wrapper">').wrap('<div class="owl-item"></div>'),this.$elem.find(".owl-wrapper").wrap('<div class="owl-wrapper-outer">'),this.wrapperOuter=this.$elem.find(".owl-wrapper-outer"),this.$elem.css("display","block")},baseClass:function(){var t=this.$elem.hasClass(this.options.baseClass),i=this.$elem.hasClass(this.options.theme);t||this.$elem.addClass(this.options.baseClass),i||this.$elem.addClass(this.options.theme)},updateItems:function(){var i,s;if(!1===this.options.responsive)return!1;if(!0===this.options.singleItem)return this.options.items=this.orignalItems=1,this.options.itemsCustom=!1,this.options.itemsDesktop=!1,this.options.itemsDesktopSmall=!1,this.options.itemsTablet=!1,this.options.itemsTabletSmall=!1,this.options.itemsMobile=!1;if(i=t(this.options.responsiveBaseWidth).width(),i>(this.options.itemsDesktop[0]||this.orignalItems)&&(this.options.items=this.orignalItems),!1!==this.options.itemsCustom)for(this.options.itemsCustom.sort(function(t,i){return t[0]-i[0]}),s=0;s<this.options.itemsCustom.length;s+=1)this.options.itemsCustom[s][0]<=i&&(this.options.items=this.options.itemsCustom[s][1]);else i<=this.options.itemsDesktop[0]&&!1!==this.options.itemsDesktop&&(this.options.items=this.options.itemsDesktop[1]),i<=this.options.itemsDesktopSmall[0]&&!1!==this.options.itemsDesktopSmall&&(this.options.items=this.options.itemsDesktopSmall[1]),i<=this.options.itemsTablet[0]&&!1!==this.options.itemsTablet&&(this.options.items=this.options.itemsTablet[1]),i<=this.options.itemsTabletSmall[0]&&!1!==this.options.itemsTabletSmall&&(this.options.items=this.options.itemsTabletSmall[1]),i<=this.options.itemsMobile[0]&&!1!==this.options.itemsMobile&&(this.options.items=this.options.itemsMobile[1]);this.options.items>this.itemsAmount&&!0===this.options.itemsScaleUp&&(this.options.items=this.itemsAmount)},response:function(){var s,e,o=this;return!0!==o.options.responsive?!1:(e=t(i).width(),o.resizer=function(){t(i).width()!==e&&(!1!==o.options.autoPlay&&i.clearInterval(o.autoPlayInterval),i.clearTimeout(s),s=i.setTimeout(function(){e=t(i).width(),o.updateVars()},o.options.responsiveRefreshRate))},void t(i).resize(o.resizer))},updatePosition:function(){this.jumpTo(this.currentItem),!1!==this.options.autoPlay&&this.checkAp()},appendItemsSizes:function(){var i=this,s=0,e=i.itemsAmount-i.options.items;i.$owlItems.each(function(o){var n=t(this);n.css({width:i.itemWidth}).data("owl-item",Number(o)),(0===o%i.options.items||o===e)&&(o>e||(s+=1)),n.data("owl-roundPages",s)})},appendWrapperSizes:function(){this.$owlWrapper.css({width:this.$owlItems.length*this.itemWidth*2,left:0}),this.appendItemsSizes()},calculateAll:function(){this.calculateWidth(),this.appendWrapperSizes(),this.loops(),this.max()},calculateWidth:function(){this.itemWidth=Math.round(this.$elem.width()/this.options.items)},max:function(){var t=-1*(this.itemsAmount*this.itemWidth-this.options.items*this.itemWidth);return this.options.items>this.itemsAmount?this.maximumPixels=t=this.maximumItem=0:(this.maximumItem=this.itemsAmount-this.options.items,this.maximumPixels=t),t},min:function(){return 0},loops:function(){var i,s,e=0,o=0;for(this.positionsInArray=[0],this.pagesInArray=[],i=0;i<this.itemsAmount;i+=1)o+=this.itemWidth,this.positionsInArray.push(-o),!0===this.options.scrollPerPage&&(s=t(this.$owlItems[i]),s=s.data("owl-roundPages"),s!==e&&(this.pagesInArray[e]=this.positionsInArray[i],e=s))},buildControls:function(){(!0===this.options.navigation||!0===this.options.pagination)&&(this.owlControls=t('<div class="owl-controls"/>').toggleClass("clickable",!this.browser.isTouch).appendTo(this.$elem)),!0===this.options.pagination&&this.buildPagination(),!0===this.options.navigation&&this.buildButtons()},buildButtons:function(){var i=this,s=t('<div class="owl-buttons"/>');i.owlControls.append(s),i.buttonPrev=t("<div/>",{"class":"owl-prev",html:i.options.navigationText[0]||""}),i.buttonNext=t("<div/>",{"class":"owl-next",html:i.options.navigationText[1]||""}),s.append(i.buttonPrev).append(i.buttonNext),s.on("touchstart.owlControls mousedown.owlControls",'div[class^="owl"]',function(t){t.preventDefault()}),s.on("touchend.owlControls mouseup.owlControls",'div[class^="owl"]',function(s){s.preventDefault(),t(this).hasClass("owl-next")?i.next():i.prev()})},buildPagination:function(){var i=this;i.paginationWrapper=t('<div class="owl-pagination"/>'),i.owlControls.append(i.paginationWrapper),i.paginationWrapper.on("touchend.owlControls mouseup.owlControls",".owl-page",function(s){s.preventDefault(),Number(t(this).data("owl-page"))!==i.currentItem&&i.goTo(Number(t(this).data("owl-page")),!0)})},updatePagination:function(){var i,s,e,o,n,a;if(!1===this.options.pagination)return!1;for(this.paginationWrapper.html(""),i=0,s=this.itemsAmount-this.itemsAmount%this.options.items,o=0;o<this.itemsAmount;o+=1)0===o%this.options.items&&(i+=1,s===o&&(e=this.itemsAmount-this.options.items),n=t("<div/>",{"class":"owl-page"}),a=t("<span></span>",{text:!0===this.options.paginationNumbers?i:"","class":!0===this.options.paginationNumbers?"owl-numbers":""}),n.append(a),n.data("owl-page",s===o?e:o),n.data("owl-roundPages",i),this.paginationWrapper.append(n));this.checkPagination()},checkPagination:function(){var i=this;return!1===i.options.pagination?!1:void i.paginationWrapper.find(".owl-page").each(function(){t(this).data("owl-roundPages")===t(i.$owlItems[i.currentItem]).data("owl-roundPages")&&(i.paginationWrapper.find(".owl-page").removeClass("active"),t(this).addClass("active"))})},checkNavigation:function(){return!1===this.options.navigation?!1:void(!1===this.options.rewindNav&&(0===this.currentItem&&0===this.maximumItem?(this.buttonPrev.addClass("disabled"),this.buttonNext.addClass("disabled")):0===this.currentItem&&0!==this.maximumItem?(this.buttonPrev.addClass("disabled"),this.buttonNext.removeClass("disabled")):this.currentItem===this.maximumItem?(this.buttonPrev.removeClass("disabled"),this.buttonNext.addClass("disabled")):0!==this.currentItem&&this.currentItem!==this.maximumItem&&(this.buttonPrev.removeClass("disabled"),this.buttonNext.removeClass("disabled"))))},updateControls:function(){this.updatePagination(),this.checkNavigation(),this.owlControls&&(this.options.items>=this.itemsAmount?this.owlControls.hide():this.owlControls.show())},destroyControls:function(){this.owlControls&&this.owlControls.remove()},next:function(t){if(this.isTransition)return!1;if(this.currentItem+=!0===this.options.scrollPerPage?this.options.items:1,this.currentItem>this.maximumItem+(!0===this.options.scrollPerPage?this.options.items-1:0)){if(!0!==this.options.rewindNav)return this.currentItem=this.maximumItem,!1;this.currentItem=0,t="rewind"}this.goTo(this.currentItem,t)},prev:function(t){if(this.isTransition)return!1;if(this.currentItem=!0===this.options.scrollPerPage&&0<this.currentItem&&this.currentItem<this.options.items?0:this.currentItem-(!0===this.options.scrollPerPage?this.options.items:1),0>this.currentItem){if(!0!==this.options.rewindNav)return this.currentItem=0,!1;this.currentItem=this.maximumItem,t="rewind"}this.goTo(this.currentItem,t)},goTo:function(t,s,e){var o=this;return o.isTransition?!1:("function"==typeof o.options.beforeMove&&o.options.beforeMove.apply(this,[o.$elem]),t>=o.maximumItem?t=o.maximumItem:0>=t&&(t=0),o.currentItem=o.owl.currentItem=t,!1!==o.options.transitionStyle&&"drag"!==e&&1===o.options.items&&!0===o.browser.support3d?(o.swapSpeed(0),!0===o.browser.support3d?o.transition3d(o.positionsInArray[t]):o.css2slide(o.positionsInArray[t],1),o.afterGo(),o.singleItemTransition(),!1):(t=o.positionsInArray[t],!0===o.browser.support3d?(o.isCss3Finish=!1,!0===s?(o.swapSpeed("paginationSpeed"),i.setTimeout(function(){o.isCss3Finish=!0},o.options.paginationSpeed)):"rewind"===s?(o.swapSpeed(o.options.rewindSpeed),i.setTimeout(function(){o.isCss3Finish=!0},o.options.rewindSpeed)):(o.swapSpeed("slideSpeed"),i.setTimeout(function(){o.isCss3Finish=!0},o.options.slideSpeed)),o.transition3d(t)):!0===s?o.css2slide(t,o.options.paginationSpeed):"rewind"===s?o.css2slide(t,o.options.rewindSpeed):o.css2slide(t,o.options.slideSpeed),void o.afterGo()))},jumpTo:function(t){"function"==typeof this.options.beforeMove&&this.options.beforeMove.apply(this,[this.$elem]),t>=this.maximumItem||-1===t?t=this.maximumItem:0>=t&&(t=0),this.swapSpeed(0),!0===this.browser.support3d?this.transition3d(this.positionsInArray[t]):this.css2slide(this.positionsInArray[t],1),this.currentItem=this.owl.currentItem=t,this.afterGo()},afterGo:function(){this.prevArr.push(this.currentItem),this.prevItem=this.owl.prevItem=this.prevArr[this.prevArr.length-2],this.prevArr.shift(0),this.prevItem!==this.currentItem&&(this.checkPagination(),this.checkNavigation(),this.eachMoveUpdate(),!1!==this.options.autoPlay&&this.checkAp()),"function"==typeof this.options.afterMove&&this.prevItem!==this.currentItem&&this.options.afterMove.apply(this,[this.$elem])},stop:function(){this.apStatus="stop",i.clearInterval(this.autoPlayInterval)},checkAp:function(){"stop"!==this.apStatus&&this.play()},play:function(){var t=this;return t.apStatus="play",!1===t.options.autoPlay?!1:(i.clearInterval(t.autoPlayInterval),void(t.autoPlayInterval=i.setInterval(function(){t.next(!0)},t.options.autoPlay)))},swapSpeed:function(t){"slideSpeed"===t?this.$owlWrapper.css(this.addCssSpeed(this.options.slideSpeed)):"paginationSpeed"===t?this.$owlWrapper.css(this.addCssSpeed(this.options.paginationSpeed)):"string"!=typeof t&&this.$owlWrapper.css(this.addCssSpeed(t))},addCssSpeed:function(t){return{"-webkit-transition":"all "+t+"ms ease","-moz-transition":"all "+t+"ms ease","-o-transition":"all "+t+"ms ease",transition:"all "+t+"ms ease"}},removeTransition:function(){return{"-webkit-transition":"","-moz-transition":"","-o-transition":"",transition:""}},doTranslate:function(t){return{"-webkit-transform":"translate3d("+t+"px, 0px, 0px)","-moz-transform":"translate3d("+t+"px, 0px, 0px)","-o-transform":"translate3d("+t+"px, 0px, 0px)","-ms-transform":"translate3d("+t+"px, 0px, 0px)",transform:"translate3d("+t+"px, 0px,0px)"}},transition3d:function(t){this.$owlWrapper.css(this.doTranslate(t))},css2move:function(t){this.$owlWrapper.css({left:t})},css2slide:function(t,i){var s=this;s.isCssFinish=!1,s.$owlWrapper.stop(!0,!0).animate({left:t},{duration:i||s.options.slideSpeed,complete:function(){s.isCssFinish=!0}})},checkBrowser:function(){var t=s.createElement("div");t.style.cssText=" -moz-transform:translate3d(0px, 0px, 0px); -ms-transform:translate3d(0px, 0px, 0px); -o-transform:translate3d(0px, 0px, 0px); -webkit-transform:translate3d(0px, 0px, 0px); transform:translate3d(0px, 0px, 0px)",t=t.style.cssText.match(/translate3d\(0px, 0px, 0px\)/g),this.browser={support3d:null!==t&&1===t.length,isTouch:"ontouchstart"in i||i.navigator.msMaxTouchPoints}},moveEvents:function(){(!1!==this.options.mouseDrag||!1!==this.options.touchDrag)&&(this.gestures(),this.disabledEvents())},eventTypes:function(){var t=["s","e","x"];this.ev_types={},!0===this.options.mouseDrag&&!0===this.options.touchDrag?t=["touchstart.owl mousedown.owl","touchmove.owl mousemove.owl","touchend.owl touchcancel.owl mouseup.owl"]:!1===this.options.mouseDrag&&!0===this.options.touchDrag?t=["touchstart.owl","touchmove.owl","touchend.owl touchcancel.owl"]:!0===this.options.mouseDrag&&!1===this.options.touchDrag&&(t=["mousedown.owl","mousemove.owl","mouseup.owl"]),this.ev_types.start=t[0],this.ev_types.move=t[1],this.ev_types.end=t[2]},disabledEvents:function(){this.$elem.on("dragstart.owl",function(t){t.preventDefault()}),this.$elem.on("mousedown.disableTextSelect",function(i){return t(i.target).is("input, textarea, select, option")})},gestures:function(){function e(t){if(void 0!==t.touches)return{x:t.touches[0].pageX,y:t.touches[0].pageY};if(void 0===t.touches){if(void 0!==t.pageX)return{x:t.pageX,y:t.pageY};if(void 0===t.pageX)return{x:t.clientX,y:t.clientY}}}function o(i){"on"===i?(t(s).on(r.ev_types.move,n),t(s).on(r.ev_types.end,a)):"off"===i&&(t(s).off(r.ev_types.move),t(s).off(r.ev_types.end))}function n(o){o=o.originalEvent||o||i.event,r.newPosX=e(o).x-l.offsetX,r.newPosY=e(o).y-l.offsetY,r.newRelativeX=r.newPosX-l.relativePos,"function"==typeof r.options.startDragging&&!0!==l.dragging&&0!==r.newRelativeX&&(l.dragging=!0,r.options.startDragging.apply(r,[r.$elem])),(8<r.newRelativeX||-8>r.newRelativeX)&&!0===r.browser.isTouch&&(void 0!==o.preventDefault?o.preventDefault():o.returnValue=!1,l.sliding=!0),(10<r.newPosY||-10>r.newPosY)&&!1===l.sliding&&t(s).off("touchmove.owl"),r.newPosX=Math.max(Math.min(r.newPosX,r.newRelativeX/5),r.maximumPixels+r.newRelativeX/5),!0===r.browser.support3d?r.transition3d(r.newPosX):r.css2move(r.newPosX)}function a(s){s=s.originalEvent||s||i.event;var e;s.target=s.target||s.srcElement,l.dragging=!1,!0!==r.browser.isTouch&&r.$owlWrapper.removeClass("grabbing"),r.dragDirection=0>r.newRelativeX?r.owl.dragDirection="left":r.owl.dragDirection="right",0!==r.newRelativeX&&(e=r.getNewPosition(),r.goTo(e,!1,"drag"),l.targetElement===s.target&&!0!==r.browser.isTouch&&(t(s.target).on("click.disable",function(i){i.stopImmediatePropagation(),i.stopPropagation(),i.preventDefault(),t(i.target).off("click.disable")}),s=t._data(s.target,"events").click,e=s.pop(),s.splice(0,0,e))),o("off")}var r=this,l={offsetX:0,offsetY:0,baseElWidth:0,relativePos:0,position:null,minSwipe:null,maxSwipe:null,sliding:null,dargging:null,targetElement:null};r.isCssFinish=!0,r.$elem.on(r.ev_types.start,".owl-wrapper",function(s){s=s.originalEvent||s||i.event;var n;if(3===s.which)return!1;if(!(r.itemsAmount<=r.options.items)){if(!1===r.isCssFinish&&!r.options.dragBeforeAnimFinish||!1===r.isCss3Finish&&!r.options.dragBeforeAnimFinish)return!1;!1!==r.options.autoPlay&&i.clearInterval(r.autoPlayInterval),!0===r.browser.isTouch||r.$owlWrapper.hasClass("grabbing")||r.$owlWrapper.addClass("grabbing"),r.newPosX=0,r.newRelativeX=0,t(this).css(r.removeTransition()),n=t(this).position(),l.relativePos=n.left,l.offsetX=e(s).x-n.left,l.offsetY=e(s).y-n.top,o("on"),l.sliding=!1,l.targetElement=s.target||s.srcElement}})},getNewPosition:function(){var t=this.closestItem();return t>this.maximumItem?t=this.currentItem=this.maximumItem:0<=this.newPosX&&(this.currentItem=t=0),t},closestItem:function(){var i=this,s=!0===i.options.scrollPerPage?i.pagesInArray:i.positionsInArray,e=i.newPosX,o=null;return t.each(s,function(n,a){e-i.itemWidth/20>s[n+1]&&e-i.itemWidth/20<a&&"left"===i.moveDirection()?(o=a,i.currentItem=!0===i.options.scrollPerPage?t.inArray(o,i.positionsInArray):n):e+i.itemWidth/20<a&&e+i.itemWidth/20>(s[n+1]||s[n]-i.itemWidth)&&"right"===i.moveDirection()&&(!0===i.options.scrollPerPage?(o=s[n+1]||s[s.length-1],i.currentItem=t.inArray(o,i.positionsInArray)):(o=s[n+1],i.currentItem=n+1))}),i.currentItem},moveDirection:function(){var t;return 0>this.newRelativeX?(t="right",this.playDirection="next"):(t="left",this.playDirection="prev"),t},customEvents:function(){var t=this;t.$elem.on("owl.next",function(){t.next()}),t.$elem.on("owl.prev",function(){t.prev()}),t.$elem.on("owl.play",function(i,s){t.options.autoPlay=s,t.play(),t.hoverStatus="play"}),t.$elem.on("owl.stop",function(){t.stop(),t.hoverStatus="stop"}),t.$elem.on("owl.goTo",function(i,s){t.goTo(s)}),t.$elem.on("owl.jumpTo",function(i,s){t.jumpTo(s)})},stopOnHover:function(){var t=this;!0===t.options.stopOnHover&&!0!==t.browser.isTouch&&!1!==t.options.autoPlay&&(t.$elem.on("mouseover",function(){t.stop()}),t.$elem.on("mouseout",function(){"stop"!==t.hoverStatus&&t.play()}))},lazyLoad:function(){var i,s,e,o,n;if(!1===this.options.lazyLoad)return!1;for(i=0;i<this.itemsAmount;i+=1)s=t(this.$owlItems[i]),"loaded"!==s.data("owl-loaded")&&(e=s.data("owl-item"),o=s.find(".lazyOwl"),"string"!=typeof o.data("src")?s.data("owl-loaded","loaded"):(void 0===s.data("owl-loaded")&&(o.hide(),s.addClass("loading").data("owl-loaded","checked")),(n=!0===this.options.lazyFollow?e>=this.currentItem:!0)&&e<this.currentItem+this.options.items&&o.length&&this.lazyPreload(s,o)))},lazyPreload:function(t,s){function e(){t.data("owl-loaded","loaded").removeClass("loading"),s.removeAttr("data-src"),"fade"===a.options.lazyEffect?s.fadeIn(400):s.show(),"function"==typeof a.options.afterLazyLoad&&a.options.afterLazyLoad.apply(this,[a.$elem])}function o(){r+=1,a.completeImg(s.get(0))||!0===n?e():100>=r?i.setTimeout(o,100):e()}var n,a=this,r=0;"DIV"===s.prop("tagName")?(s.css("background-image","url("+s.data("src")+")"),n=!0):s[0].src=s.data("src"),o()},autoHeight:function(){function s(){var s=t(n.$owlItems[n.currentItem]).height();n.wrapperOuter.css("height",s+"px"),n.wrapperOuter.hasClass("autoHeight")||i.setTimeout(function(){n.wrapperOuter.addClass("autoHeight")},0)}function e(){o+=1,n.completeImg(a.get(0))?s():100>=o?i.setTimeout(e,100):n.wrapperOuter.css("height","")}var o,n=this,a=t(n.$owlItems[n.currentItem]).find("img");void 0!==a.get(0)?(o=0,e()):s()},completeImg:function(t){return!t.complete||"undefined"!=typeof t.naturalWidth&&0===t.naturalWidth?!1:!0},onVisibleItems:function(){var i;for(!0===this.options.addClassActive&&this.$owlItems.removeClass("active"),this.visibleItems=[],i=this.currentItem;i<this.currentItem+this.options.items;i+=1)this.visibleItems.push(i),!0===this.options.addClassActive&&t(this.$owlItems[i]).addClass("active");this.owl.visibleItems=this.visibleItems},transitionTypes:function(t){this.outClass="owl-"+t+"-out",this.inClass="owl-"+t+"-in"},singleItemTransition:function(){var t=this,i=t.outClass,s=t.inClass,e=t.$owlItems.eq(t.currentItem),o=t.$owlItems.eq(t.prevItem),n=Math.abs(t.positionsInArray[t.currentItem])+t.positionsInArray[t.prevItem],a=Math.abs(t.positionsInArray[t.currentItem])+t.itemWidth/2;t.isTransition=!0,t.$owlWrapper.addClass("owl-origin").css({"-webkit-transform-origin":a+"px","-moz-perspective-origin":a+"px","perspective-origin":a+"px"}),o.css({position:"relative",left:n+"px"}).addClass(i).on("webkitAnimationEnd oAnimationEnd MSAnimationEnd animationend",function(){t.endPrev=!0,o.off("webkitAnimationEnd oAnimationEnd MSAnimationEnd animationend"),t.clearTransStyle(o,i)}),e.addClass(s).on("webkitAnimationEnd oAnimationEnd MSAnimationEnd animationend",function(){t.endCurrent=!0,e.off("webkitAnimationEnd oAnimationEnd MSAnimationEnd animationend"),t.clearTransStyle(e,s)})},clearTransStyle:function(t,i){t.css({position:"",left:""}).removeClass(i),this.endPrev&&this.endCurrent&&(this.$owlWrapper.removeClass("owl-origin"),this.isTransition=this.endCurrent=this.endPrev=!1)},owlStatus:function(){this.owl={userOptions:this.userOptions,baseElement:this.$elem,userItems:this.$userItems,owlItems:this.$owlItems,currentItem:this.currentItem,prevItem:this.prevItem,visibleItems:this.visibleItems,isTouch:this.browser.isTouch,browser:this.browser,dragDirection:this.dragDirection}},clearEvents:function(){this.$elem.off(".owl owl mousedown.disableTextSelect"),t(s).off(".owl owl"),t(i).off("resize",this.resizer)},unWrap:function(){0!==this.$elem.children().length&&(this.$owlWrapper.unwrap(),this.$userItems.unwrap().unwrap(),this.owlControls&&this.owlControls.remove()),this.clearEvents(),this.$elem.attr("style",this.$elem.data("owl-originalStyles")||"").attr("class",this.$elem.data("owl-originalClasses"))},destroy:function(){this.stop(),i.clearInterval(this.checkVisible),this.unWrap(),this.$elem.removeData()},reinit:function(i){i=t.extend({},this.userOptions,i),this.unWrap(),this.init(i,this.$elem)},addItem:function(t,i){var s;return t?0===this.$elem.children().length?(this.$elem.append(t),this.setVars(),!1):(this.unWrap(),s=void 0===i||-1===i?-1:i,s>=this.$userItems.length||-1===s?this.$userItems.eq(-1).after(t):this.$userItems.eq(s).before(t),void this.setVars()):!1},removeItem:function(t){return 0===this.$elem.children().length?!1:(t=void 0===t||-1===t?-1:t,this.unWrap(),this.$userItems.eq(t).remove(),void this.setVars())}};t.fn.owlCarousel=function(i){return this.each(function(){if(!0===t(this).data("owl-init"))return!1;t(this).data("owl-init",!0);var s=Object.create(e);s.init(i,this),t.data(this,"owlCarousel",s)})},t.fn.owlCarousel.options={items:5,itemsCustom:!1,itemsDesktop:[1199,4],itemsDesktopSmall:[979,3],itemsTablet:[768,2],itemsTabletSmall:!1,itemsMobile:[479,1],singleItem:!1,itemsScaleUp:!1,slideSpeed:200,paginationSpeed:800,rewindSpeed:1e3,autoPlay:!1,stopOnHover:!1,navigation:!1,navigationText:["prev","next"],rewindNav:!0,scrollPerPage:!1,pagination:!0,paginationNumbers:!1,responsive:!0,responsiveRefreshRate:200,responsiveBaseWidth:i,baseClass:"owl-carousel",theme:"owl-theme",lazyLoad:!1,lazyFollow:!0,lazyEffect:"fade",autoHeight:!1,jsonPath:!1,jsonSuccess:!1,dragBeforeAnimFinish:!0,mouseDrag:!0,touchDrag:!0,addClassActive:!1,transitionStyle:!1,beforeUpdate:!1,afterUpdate:!1,beforeInit:!1,afterInit:!1,beforeMove:!1,afterMove:!1,afterAction:!1,startDragging:!1,afterLazyLoad:!1}}(jQuery,window,document);
Revolution Slider
https://revolution.themepunch.com/examples-jquery/
FlexSlider
FlexSlider - JavaScript Plugin
Vegas Slider
Schlichter aber vielseitiger Slider mit schönem KenBurns Effekt und div. Übergängen. Erfordert etwas JS Kenntnisse wenn mehr angepasst werden soll.
MultiScroll.js
http://alvarotrigo.com/multiScroll
Gegenläufiger Scroller
<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- This following line is needed in case of using the default easing option or when using another
one rather than "linear" or "swing". You can also add the full jQuery UI instead of this file if you prefer -->
<script src="vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="jquery.multiscroll.js"></script>
<div id="multiscroll">
<div class="ms-left">
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
</div>
<div class="ms-right">
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
</div>
</div>
Diverse
Match Heights
Spalten in der Länge anpassen. Siehe auch Flex Grid in CSS3
Fit Viewport
Element an die Höhe des Viewports anpassen
Scrolling
Ariel Fiesler ScrollTo
https://github.com/flesler/jquery.scrollTo
Lightweight, cross-browser and highly customizable animated scrolling with jQuery
Ariel Fiesler LocalScroll
https://github.com/flesler/jquery.localScroll
Animated anchor navigation made easy with jQuery
Smooth Scroll
Oil for Scrolling - damit ruckelt es nicht so beim Scrollen mit dem Mausrad
//
// SmoothScroll for websites v1.4.0 (Balazs Galambosi)
// http://www.smoothscroll.net/
//
// Licensed under the terms of the MIT license.
//
// You may use it in your theme if you credit me.
// It is also free to use on any individual website.
//
// Exception:
// The only restriction is to not publish any
// extension for browsers or native application
// without getting a written permission first.
//
!function(){function e(){z.keyboardSupport&&m("keydown",a)}function t(){if(!A&&document.body){A=!0;var t=document.body,o=document.documentElement,n=window.innerHeight,r=t.scrollHeight;if(B=document.compatMode.indexOf("CSS")>=0?o:t,D=t,e(),top!=self)X=!0;else if(r>n&&(t.offsetHeight<=n||o.offsetHeight<=n)){var a=document.createElement("div");a.style.cssText="position:absolute; z-index:-10000; top:0; left:0; right:0; height:"+B.scrollHeight+"px",document.body.appendChild(a);var i;T=function(){i||(i=setTimeout(function(){L||(a.style.height="0",a.style.height=B.scrollHeight+"px",i=null)},500))},setTimeout(T,10),m("resize",T);var l={attributes:!0,childList:!0,characterData:!1};if(M=new V(T),M.observe(t,l),B.offsetHeight<=n){var c=document.createElement("div");c.style.clear="both",t.appendChild(c)}}z.fixedBackground||L||(t.style.backgroundAttachment="scroll",o.style.backgroundAttachment="scroll")}}function o(){M&&M.disconnect(),h(I,r),h("mousedown",i),h("keydown",a),h("resize",T),h("load",t)}function n(e,t,o){if(p(t,o),1!=z.accelerationMax){var n=Date.now(),r=n-R;if(r<z.accelerationDelta){var a=(1+50/r)/2;a>1&&(a=Math.min(a,z.accelerationMax),t*=a,o*=a)}R=Date.now()}if(q.push({x:t,y:o,lastX:0>t?.99:-.99,lastY:0>o?.99:-.99,start:Date.now()}),!P){var i=e===document.body,l=function(n){for(var r=Date.now(),a=0,c=0,u=0;u<q.length;u++){var d=q[u],s=r-d.start,f=s>=z.animationTime,m=f?1:s/z.animationTime;z.pulseAlgorithm&&(m=x(m));var h=d.x*m-d.lastX>>0,w=d.y*m-d.lastY>>0;a+=h,c+=w,d.lastX+=h,d.lastY+=w,f&&(q.splice(u,1),u--)}i?window.scrollBy(a,c):(a&&(e.scrollLeft+=a),c&&(e.scrollTop+=c)),t||o||(q=[]),q.length?_(l,e,1e3/z.frameRate+1):P=!1};_(l,e,0),P=!0}}function r(e){A||t();var o=e.target,r=u(o);if(!r||e.defaultPrevented||e.ctrlKey)return!0;if(w(D,"embed")||w(o,"embed")&&/\.pdf/i.test(o.src)||w(D,"object"))return!0;var a=-e.wheelDeltaX||e.deltaX||0,i=-e.wheelDeltaY||e.deltaY||0;return K&&(e.wheelDeltaX&&b(e.wheelDeltaX,120)&&(a=-120*(e.wheelDeltaX/Math.abs(e.wheelDeltaX))),e.wheelDeltaY&&b(e.wheelDeltaY,120)&&(i=-120*(e.wheelDeltaY/Math.abs(e.wheelDeltaY)))),a||i||(i=-e.wheelDelta||0),1===e.deltaMode&&(a*=40,i*=40),!z.touchpadSupport&&v(i)?!0:(Math.abs(a)>1.2&&(a*=z.stepSize/120),Math.abs(i)>1.2&&(i*=z.stepSize/120),n(r,a,i),e.preventDefault(),void l())}function a(e){var t=e.target,o=e.ctrlKey||e.altKey||e.metaKey||e.shiftKey&&e.keyCode!==N.spacebar;document.contains(D)||(D=document.activeElement);var r=/^(textarea|select|embed|object)$/i,a=/^(button|submit|radio|checkbox|file|color|image)$/i;if(r.test(t.nodeName)||w(t,"input")&&!a.test(t.type)||w(D,"video")||y(e)||t.isContentEditable||e.defaultPrevented||o)return!0;if((w(t,"button")||w(t,"input")&&a.test(t.type))&&e.keyCode===N.spacebar)return!0;var i,c=0,d=0,s=u(D),f=s.clientHeight;switch(s==document.body&&(f=window.innerHeight),e.keyCode){case N.up:d=-z.arrowScroll;break;case N.down:d=z.arrowScroll;break;case N.spacebar:i=e.shiftKey?1:-1,d=-i*f*.9;break;case N.pageup:d=.9*-f;break;case N.pagedown:d=.9*f;break;case N.home:d=-s.scrollTop;break;case N.end:var m=s.scrollHeight-s.scrollTop-f;d=m>0?m+10:0;break;case N.left:c=-z.arrowScroll;break;case N.right:c=z.arrowScroll;break;default:return!0}n(s,c,d),e.preventDefault(),l()}function i(e){D=e.target}function l(){clearTimeout(E),E=setInterval(function(){F={}},1e3)}function c(e,t){for(var o=e.length;o--;)F[j(e[o])]=t;return t}function u(e){var t=[],o=document.body,n=B.scrollHeight;do{var r=F[j(e)];if(r)return c(t,r);if(t.push(e),n===e.scrollHeight){var a=s(B)&&s(o),i=a||f(B);if(X&&d(B)||!X&&i)return c(t,$())}else if(d(e)&&f(e))return c(t,e)}while(e=e.parentElement)}function d(e){return e.clientHeight+10<e.scrollHeight}function s(e){var t=getComputedStyle(e,"").getPropertyValue("overflow-y");return"hidden"!==t}function f(e){var t=getComputedStyle(e,"").getPropertyValue("overflow-y");return"scroll"===t||"auto"===t}function m(e,t){window.addEventListener(e,t,!1)}function h(e,t){window.removeEventListener(e,t,!1)}function w(e,t){return(e.nodeName||"").toLowerCase()===t.toLowerCase()}function p(e,t){e=e>0?1:-1,t=t>0?1:-1,(Y.x!==e||Y.y!==t)&&(Y.x=e,Y.y=t,q=[],R=0)}function v(e){return e?(O.length||(O=[e,e,e]),e=Math.abs(e),O.push(e),O.shift(),clearTimeout(H),H=setTimeout(function(){window.localStorage&&(localStorage.SS_deltaBuffer=O.join(","))},1e3),!g(120)&&!g(100)):void 0}function b(e,t){return Math.floor(e/t)==e/t}function g(e){return b(O[0],e)&&b(O[1],e)&&b(O[2],e)}function y(e){var t=e.target,o=!1;if(-1!=document.URL.indexOf("www.youtube.com/watch"))do if(o=t.classList&&t.classList.contains("html5-video-controls"))break;while(t=t.parentNode);return o}function S(e){var t,o,n;return e*=z.pulseScale,1>e?t=e-(1-Math.exp(-e)):(o=Math.exp(-1),e-=1,n=1-Math.exp(-e),t=o+n*(1-o)),t*z.pulseNormalize}function x(e){return e>=1?1:0>=e?0:(1==z.pulseNormalize&&(z.pulseNormalize/=S(1)),S(e))}function k(e){for(var t in e)C.hasOwnProperty(t)&&(z[t]=e[t])}var D,M,T,E,H,C={frameRate:150,animationTime:400,stepSize:100,pulseAlgorithm:!0,pulseScale:4,pulseNormalize:1,accelerationDelta:50,accelerationMax:3,keyboardSupport:!0,arrowScroll:50,touchpadSupport:!1,fixedBackground:!0,excluded:""},z=C,L=!1,X=!1,Y={x:0,y:0},A=!1,B=document.documentElement,O=[],K=/^Mac/.test(navigator.platform),N={left:37,up:38,right:39,down:40,spacebar:32,pageup:33,pagedown:34,end:35,home:36},q=[],P=!1,R=Date.now(),j=function(){var e=0;return function(t){return t.uniqueID||(t.uniqueID=e++)}}(),F={};window.localStorage&&localStorage.SS_deltaBuffer&&(O=localStorage.SS_deltaBuffer.split(","));var I,_=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e,t,o){window.setTimeout(e,o||1e3/60)}}(),V=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver,$=function(){var e;return function(){if(!e){var t=document.createElement("div");t.style.cssText="height:10000px;width:1px;",document.body.appendChild(t);var o=document.body.scrollTop;document.documentElement.scrollTop;window.scrollBy(0,1),e=document.body.scrollTop!=o?document.body:document.documentElement,window.scrollBy(0,-1),document.body.removeChild(t)}return e}}(),U=window.navigator.userAgent,W=/Edge/.test(U),G=/chrome/i.test(U)&&!W,J=/safari/i.test(U)&&!W,Q=/mobile/i.test(U),Z=(G||J)&&!Q;"onwheel"in document.createElement("div")?I="wheel":"onmousewheel"in document.createElement("div")&&(I="mousewheel"),I&&Z&&(m(I,r),m("mousedown",i),m("load",t)),k.destroy=o,window.SmoothScrollOptions&&k(window.SmoothScrollOptions),"function"==typeof define&&define.amd?define(function(){return k}):"object"==typeof exports?module.exports=k:window.SmoothScroll=k}();
Typography
Letter.js
Zerpflückt Texte und wrappt Buchstaben / Wörter / Zeilen in durchnummerierte Klassen. Diese kann man dann cool Stylen.
https://github.com/davatron5000/Lettering.js
Fittext
Responsive Textgrößen in Typographie-Spielereien für Überschriften etc.
Google Maps mit gmaps.js
https://hpneo.github.io/gmaps/ Einfache Karte
new GMaps({
div: '#map',
lat: -12.043333,
lng: -77.028333
});
Grey Style Karte
//Google map
/*global $:false */
var map;
$(document).ready(function(){"use strict";
map = new GMaps({
disableDefaultUI: true,
scrollwheel: false,
el: '#map',
lat: 48.4912812,
lng: 9.2175255
});
map.drawOverlay({
lat: map.getCenter().lat(),
lng: map.getCenter().lng(),
layer: 'overlayLayer',
content: '<div class="overlay"></div>',
verticalAlign: 'center',
horizontalAlign: 'center'
});
var styles = [
{
"featureType": "poi",
"stylers": [
{ "visibility": "on" },
{ "weight": 0.9 },
{ "lightness": 37 },
{ "gamma": 0.62 },
{ "hue": "#ff0000" },
{ "saturation": -93 }
]
},{
"featureType": "poi",
"stylers": [
{ "hue": "#ff0000" },
{ "saturation": -1 },
{ "color": "#ffffff" },
{ "weight": 0.2 }
]
},{
"featureType": "road",
"stylers": [
{ "hue": "#ff0000" },
{ "saturation": -98 }
]
},{
"featureType": "landscape",
"stylers": [
{ "hue": "#ff0000" },
{ "saturation": -89 }
]
},{
"featureType": "water",
"stylers": [
{ "hue": "#cfa144" },
{ "weight": 0.4 },
{ "saturation": -38 }
]
}
];
map.addStyle({
styledMapName:"Styled Map",
styles: styles,
mapTypeId: "map_style"
});
map.setStyle("map_style");
});
"use strict";
(function(root, factory) {
if(typeof exports === 'object') {
module.exports = factory();
}
else if(typeof define === 'function' && define.amd) {
define(['jquery', 'googlemaps!'], factory);
}
else {
root.GMaps = factory();
}
}(this, function() {
/*!
* GMaps.js v0.4.25
* http://hpneo.github.com/gmaps/
*
* Copyright 2017, Gustavo Leon
* Released under the MIT License.
*/
var extend_object = function(obj, new_obj) {
var name;
if (obj === new_obj) {
return obj;
}
for (name in new_obj) {
if (new_obj[name] !== undefined) {
obj[name] = new_obj[name];
}
}
return obj;
};
var replace_object = function(obj, replace) {
var name;
if (obj === replace) {
return obj;
}
for (name in replace) {
if (obj[name] != undefined) {
obj[name] = replace[name];
}
}
return obj;
};
var array_map = function(array, callback) {
var original_callback_params = Array.prototype.slice.call(arguments, 2),
array_return = [],
array_length = array.length,
i;
if (Array.prototype.map && array.map === Array.prototype.map) {
array_return = Array.prototype.map.call(array, function(item) {
var callback_params = original_callback_params.slice(0);
callback_params.splice(0, 0, item);
return callback.apply(this, callback_params);
});
}
else {
for (i = 0; i < array_length; i++) {
callback_params = original_callback_params;
callback_params.splice(0, 0, array[i]);
array_return.push(callback.apply(this, callback_params));
}
}
return array_return;
};
var array_flat = function(array) {
var new_array = [],
i;
for (i = 0; i < array.length; i++) {
new_array = new_array.concat(array[i]);
}
return new_array;
};
var coordsToLatLngs = function(coords, useGeoJSON) {
var first_coord = coords[0],
second_coord = coords[1];
if (useGeoJSON) {
first_coord = coords[1];
second_coord = coords[0];
}
return new google.maps.LatLng(first_coord, second_coord);
};
var arrayToLatLng = function(coords, useGeoJSON) {
var i;
for (i = 0; i < coords.length; i++) {
if (!(coords[i] instanceof google.maps.LatLng)) {
if (coords[i].length > 0 && typeof(coords[i][0]) === "object") {
coords[i] = arrayToLatLng(coords[i], useGeoJSON);
}
else {
coords[i] = coordsToLatLngs(coords[i], useGeoJSON);
}
}
}
return coords;
};
var getElementsByClassName = function (class_name, context) {
var element,
_class = class_name.replace('.', '');
if ('jQuery' in this && context) {
element = $("." + _class, context)[0];
} else {
element = document.getElementsByClassName(_class)[0];
}
return element;
};
var getElementById = function(id, context) {
var element,
id = id.replace('#', '');
if ('jQuery' in window && context) {
element = $('#' + id, context)[0];
} else {
element = document.getElementById(id);
};
return element;
};
var findAbsolutePosition = function(obj) {
var curleft = 0,
curtop = 0;
if (obj.getBoundingClientRect) {
var rect = obj.getBoundingClientRect();
var sx = -(window.scrollX ? window.scrollX : window.pageXOffset);
var sy = -(window.scrollY ? window.scrollY : window.pageYOffset);
return [(rect.left - sx), (rect.top - sy)];
}
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return [curleft, curtop];
};
var GMaps = (function(global) {
"use strict";
var doc = document;
/**
* Creates a new GMaps instance, including a Google Maps map.
* @class GMaps
* @constructs
* @param {object} options - `options` accepts all the [MapOptions](https://developers.google.com/maps/documentation/javascript/reference#MapOptions) and [events](https://developers.google.com/maps/documentation/javascript/reference#Map) listed in the Google Maps API. Also accepts:
* * `lat` (number): Latitude of the map's center
* * `lng` (number): Longitude of the map's center
* * `el` (string or HTMLElement): container where the map will be rendered
* * `markerClusterer` (function): A function to create a marker cluster. You can use MarkerClusterer or MarkerClustererPlus.
*/
var GMaps = function(options) {
if (!(typeof window.google === 'object' && window.google.maps)) {
if (typeof window.console === 'object' && window.console.error) {
console.error('Google Maps API is required. Please register the following JavaScript library https://maps.googleapis.com/maps/api/js.');
}
return function() {};
}
if (!this) return new GMaps(options);
options.zoom = options.zoom || 15;
options.mapType = options.mapType || 'roadmap';
var valueOrDefault = function(value, defaultValue) {
return value === undefined ? defaultValue : value;
};
var self = this,
i,
events_that_hide_context_menu = [
'bounds_changed', 'center_changed', 'click', 'dblclick', 'drag',
'dragend', 'dragstart', 'idle', 'maptypeid_changed', 'projection_changed',
'resize', 'tilesloaded', 'zoom_changed'
],
events_that_doesnt_hide_context_menu = ['mousemove', 'mouseout', 'mouseover'],
options_to_be_deleted = ['el', 'lat', 'lng', 'mapType', 'width', 'height', 'markerClusterer', 'enableNewStyle'],
identifier = options.el || options.div,
markerClustererFunction = options.markerClusterer,
mapType = google.maps.MapTypeId[options.mapType.toUpperCase()],
map_center = new google.maps.LatLng(options.lat, options.lng),
zoomControl = valueOrDefault(options.zoomControl, true),
zoomControlOpt = options.zoomControlOpt || {
style: 'DEFAULT',
position: 'TOP_LEFT'
},
zoomControlStyle = zoomControlOpt.style || 'DEFAULT',
zoomControlPosition = zoomControlOpt.position || 'TOP_LEFT',
panControl = valueOrDefault(options.panControl, true),
mapTypeControl = valueOrDefault(options.mapTypeControl, true),
scaleControl = valueOrDefault(options.scaleControl, true),
streetViewControl = valueOrDefault(options.streetViewControl, true),
overviewMapControl = valueOrDefault(overviewMapControl, true),
map_options = {},
map_base_options = {
zoom: this.zoom,
center: map_center,
mapTypeId: mapType
},
map_controls_options = {
panControl: panControl,
zoomControl: zoomControl,
zoomControlOptions: {
style: google.maps.ZoomControlStyle[zoomControlStyle],
position: google.maps.ControlPosition[zoomControlPosition]
},
mapTypeControl: mapTypeControl,
scaleControl: scaleControl,
streetViewControl: streetViewControl,
overviewMapControl: overviewMapControl
};
if (typeof(options.el) === 'string' || typeof(options.div) === 'string') {
if (identifier.indexOf("#") > -1) {
/**
* Container element
*
* @type {HTMLElement}
*/
this.el = getElementById(identifier, options.context);
} else {
this.el = getElementsByClassName.apply(this, [identifier, options.context]);
}
} else {
this.el = identifier;
}
if (typeof(this.el) === 'undefined' || this.el === null) {
throw 'No element defined.';
}
window.context_menu = window.context_menu || {};
window.context_menu[self.el.id] = {};
/**
* Collection of custom controls in the map UI
*
* @type {array}
*/
this.controls = [];
/**
* Collection of map's overlays
*
* @type {array}
*/
this.overlays = [];
/**
* Collection of KML/GeoRSS and FusionTable layers
*
* @type {array}
*/
this.layers = [];
/**
* Collection of data layers (See {@link GMaps#addLayer})
*
* @type {object}
*/
this.singleLayers = {};
/**
* Collection of map's markers
*
* @type {array}
*/
this.markers = [];
/**
* Collection of map's lines
*
* @type {array}
*/
this.polylines = [];
/**
* Collection of map's routes requested by {@link GMaps#getRoutes}, {@link GMaps#renderRoute}, {@link GMaps#drawRoute}, {@link GMaps#travelRoute} or {@link GMaps#drawSteppedRoute}
*
* @type {array}
*/
this.routes = [];
/**
* Collection of map's polygons
*
* @type {array}
*/
this.polygons = [];
this.infoWindow = null;
this.overlay_el = null;
/**
* Current map's zoom
*
* @type {number}
*/
this.zoom = options.zoom;
this.registered_events = {};
this.el.style.width = options.width || this.el.scrollWidth || this.el.offsetWidth;
this.el.style.height = options.height || this.el.scrollHeight || this.el.offsetHeight;
google.maps.visualRefresh = options.enableNewStyle;
for (i = 0; i < options_to_be_deleted.length; i++) {
delete options[options_to_be_deleted[i]];
}
if(options.disableDefaultUI != true) {
map_base_options = extend_object(map_base_options, map_controls_options);
}
map_options = extend_object(map_base_options, options);
for (i = 0; i < events_that_hide_context_menu.length; i++) {
delete map_options[events_that_hide_context_menu[i]];
}
for (i = 0; i < events_that_doesnt_hide_context_menu.length; i++) {
delete map_options[events_that_doesnt_hide_context_menu[i]];
}
/**
* Google Maps map instance
*
* @type {google.maps.Map}
*/
this.map = new google.maps.Map(this.el, map_options);
if (markerClustererFunction) {
/**
* Marker Clusterer instance
*
* @type {object}
*/
this.markerClusterer = markerClustererFunction.apply(this, [this.map]);
}
var buildContextMenuHTML = function(control, e) {
var html = '',
options = window.context_menu[self.el.id][control];
for (var i in options){
if (options.hasOwnProperty(i)) {
var option = options[i];
html += '<li><a id="' + control + '_' + i + '" href="#">' + option.title + '</a></li>';
}
}
if (!getElementById('gmaps_context_menu')) return;
var context_menu_element = getElementById('gmaps_context_menu');
context_menu_element.innerHTML = html;
var context_menu_items = context_menu_element.getElementsByTagName('a'),
context_menu_items_count = context_menu_items.length,
i;
for (i = 0; i < context_menu_items_count; i++) {
var context_menu_item = context_menu_items[i];
var assign_menu_item_action = function(ev){
ev.preventDefault();
options[this.id.replace(control + '_', '')].action.apply(self, [e]);
self.hideContextMenu();
};
google.maps.event.clearListeners(context_menu_item, 'click');
google.maps.event.addDomListenerOnce(context_menu_item, 'click', assign_menu_item_action, false);
}
var position = findAbsolutePosition.apply(this, [self.el]),
left = position[0] + e.pixel.x - 15,
top = position[1] + e.pixel.y- 15;
context_menu_element.style.left = left + "px";
context_menu_element.style.top = top + "px";
// context_menu_element.style.display = 'block';
};
this.buildContextMenu = function(control, e) {
if (control === 'marker') {
e.pixel = {};
var overlay = new google.maps.OverlayView();
overlay.setMap(self.map);
overlay.draw = function() {
var projection = overlay.getProjection(),
position = e.marker.getPosition();
e.pixel = projection.fromLatLngToContainerPixel(position);
buildContextMenuHTML(control, e);
};
}
else {
buildContextMenuHTML(control, e);
}
var context_menu_element = getElementById('gmaps_context_menu');
setTimeout(function() {
context_menu_element.style.display = 'block';
}, 0);
};
/**
* Add a context menu for a map or a marker.
*
* @param {object} options - The `options` object should contain:
* * `control` (string): Kind of control the context menu will be attached. Can be "map" or "marker".
* * `options` (array): A collection of context menu items:
* * `title` (string): Item's title shown in the context menu.
* * `name` (string): Item's identifier.
* * `action` (function): Function triggered after selecting the context menu item.
*/
this.setContextMenu = function(options) {
window.context_menu[self.el.id][options.control] = {};
var i,
ul = doc.createElement('ul');
for (i in options.options) {
if (options.options.hasOwnProperty(i)) {
var option = options.options[i];
window.context_menu[self.el.id][options.control][option.name] = {
title: option.title,
action: option.action
};
}
}
ul.id = 'gmaps_context_menu';
ul.style.display = 'none';
ul.style.position = 'absolute';
ul.style.minWidth = '100px';
ul.style.background = 'white';
ul.style.listStyle = 'none';
ul.style.padding = '8px';
ul.style.boxShadow = '2px 2px 6px #ccc';
if (!getElementById('gmaps_context_menu')) {
doc.body.appendChild(ul);
}
var context_menu_element = getElementById('gmaps_context_menu');
google.maps.event.addDomListener(context_menu_element, 'mouseout', function(ev) {
if (!ev.relatedTarget || !this.contains(ev.relatedTarget)) {
window.setTimeout(function(){
context_menu_element.style.display = 'none';
}, 400);
}
}, false);
};
/**
* Hide the current context menu
*/
this.hideContextMenu = function() {
var context_menu_element = getElementById('gmaps_context_menu');
if (context_menu_element) {
context_menu_element.style.display = 'none';
}
};
var setupListener = function(object, name) {
google.maps.event.addListener(object, name, function(e){
if (e == undefined) {
e = this;
}
options[name].apply(this, [e]);
self.hideContextMenu();
});
};
//google.maps.event.addListener(this.map, 'idle', this.hideContextMenu);
google.maps.event.addListener(this.map, 'zoom_changed', this.hideContextMenu);
for (var ev = 0; ev < events_that_hide_context_menu.length; ev++) {
var name = events_that_hide_context_menu[ev];
if (name in options) {
setupListener(this.map, name);
}
}
for (var ev = 0; ev < events_that_doesnt_hide_context_menu.length; ev++) {
var name = events_that_doesnt_hide_context_menu[ev];
if (name in options) {
setupListener(this.map, name);
}
}
google.maps.event.addListener(this.map, 'rightclick', function(e) {
if (options.rightclick) {
options.rightclick.apply(this, [e]);
}
if(window.context_menu[self.el.id]['map'] != undefined) {
self.buildContextMenu('map', e);
}
});
/**
* Trigger a `resize` event, useful if you need to repaint the current map (for changes in the viewport or display / hide actions).
*/
this.refresh = function() {
google.maps.event.trigger(this.map, 'resize');
};
/**
* Adjust the map zoom to include all the markers added in the map.
*/
this.fitZoom = function() {
var latLngs = [],
markers_length = this.markers.length,
i;
for (i = 0; i < markers_length; i++) {
if(typeof(this.markers[i].visible) === 'boolean' && this.markers[i].visible) {
latLngs.push(this.markers[i].getPosition());
}
}
this.fitLatLngBounds(latLngs);
};
/**
* Adjust the map zoom to include all the coordinates in the `latLngs` array.
*
* @param {array} latLngs - Collection of `google.maps.LatLng` objects.
*/
this.fitLatLngBounds = function(latLngs) {
var total = latLngs.length,
bounds = new google.maps.LatLngBounds(),
i;
for(i = 0; i < total; i++) {
bounds.extend(latLngs[i]);
}
this.map.fitBounds(bounds);
};
/**
* Center the map using the `lat` and `lng` coordinates.
*
* @param {number} lat - Latitude of the coordinate.
* @param {number} lng - Longitude of the coordinate.
* @param {function} [callback] - Callback that will be executed after the map is centered.
*/
this.setCenter = function(lat, lng, callback) {
this.map.panTo(new google.maps.LatLng(lat, lng));
if (callback) {
callback();
}
};
/**
* Return the HTML element container of the map.
*
* @returns {HTMLElement} the element container.
*/
this.getElement = function() {
return this.el;
};
/**
* Increase the map's zoom.
*
* @param {number} [magnitude] - The number of times the map will be zoomed in.
*/
this.zoomIn = function(value) {
value = value || 1;
this.zoom = this.map.getZoom() + value;
this.map.setZoom(this.zoom);
};
/**
* Decrease the map's zoom.
*
* @param {number} [magnitude] - The number of times the map will be zoomed out.
*/
this.zoomOut = function(value) {
value = value || 1;
this.zoom = this.map.getZoom() - value;
this.map.setZoom(this.zoom);
};
var native_methods = [],
method;
for (method in this.map) {
if (typeof(this.map[method]) == 'function' && !this[method]) {
native_methods.push(method);
}
}
for (i = 0; i < native_methods.length; i++) {
(function(gmaps, scope, method_name) {
gmaps[method_name] = function(){
return scope[method_name].apply(scope, arguments);
};
})(this, this.map, native_methods[i]);
}
};
return GMaps;
})(this);
GMaps.prototype.createControl = function(options) {
var control = document.createElement('div');
control.style.cursor = 'pointer';
if (options.disableDefaultStyles !== true) {
control.style.fontFamily = 'Roboto, Arial, sans-serif';
control.style.fontSize = '11px';
control.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
}
for (var option in options.style) {
control.style[option] = options.style[option];
}
if (options.id) {
control.id = options.id;
}
if (options.title) {
control.title = options.title;
}
if (options.classes) {
control.className = options.classes;
}
if (options.content) {
if (typeof options.content === 'string') {
control.innerHTML = options.content;
}
else if (options.content instanceof HTMLElement) {
control.appendChild(options.content);
}
}
if (options.position) {
control.position = google.maps.ControlPosition[options.position.toUpperCase()];
}
for (var ev in options.events) {
(function(object, name) {
google.maps.event.addDomListener(object, name, function(){
options.events[name].apply(this, [this]);
});
})(control, ev);
}
control.index = 1;
return control;
};
/**
* Add a custom control to the map UI.
*
* @param {object} options - The `options` object should contain:
* * `style` (object): The keys and values of this object should be valid CSS properties and values.
* * `id` (string): The HTML id for the custom control.
* * `classes` (string): A string containing all the HTML classes for the custom control.
* * `content` (string or HTML element): The content of the custom control.
* * `position` (string): Any valid [`google.maps.ControlPosition`](https://developers.google.com/maps/documentation/javascript/controls#ControlPositioning) value, in lower or upper case.
* * `events` (object): The keys of this object should be valid DOM events. The values should be functions.
* * `disableDefaultStyles` (boolean): If false, removes the default styles for the controls like font (family and size), and box shadow.
* @returns {HTMLElement}
*/
GMaps.prototype.addControl = function(options) {
var control = this.createControl(options);
this.controls.push(control);
this.map.controls[control.position].push(control);
return control;
};
/**
* Remove a control from the map. `control` should be a control returned by `addControl()`.
*
* @param {HTMLElement} control - One of the controls returned by `addControl()`.
* @returns {HTMLElement} the removed control.
*/
GMaps.prototype.removeControl = function(control) {
var position = null,
i;
for (i = 0; i < this.controls.length; i++) {
if (this.controls[i] == control) {
position = this.controls[i].position;
this.controls.splice(i, 1);
}
}
if (position) {
for (i = 0; i < this.map.controls.length; i++) {
var controlsForPosition = this.map.controls[control.position];
if (controlsForPosition.getAt(i) == control) {
controlsForPosition.removeAt(i);
break;
}
}
}
return control;
};
GMaps.prototype.createMarker = function(options) {
if (options.lat == undefined && options.lng == undefined && options.position == undefined) {
throw 'No latitude or longitude defined.';
}
var self = this,
details = options.details,
fences = options.fences,
outside = options.outside,
base_options = {
position: new google.maps.LatLng(options.lat, options.lng),
map: null
},
marker_options = extend_object(base_options, options);
delete marker_options.lat;
delete marker_options.lng;
delete marker_options.fences;
delete marker_options.outside;
var marker = new google.maps.Marker(marker_options);
marker.fences = fences;
if (options.infoWindow) {
marker.infoWindow = new google.maps.InfoWindow(options.infoWindow);
var info_window_events = ['closeclick', 'content_changed', 'domready', 'position_changed', 'zindex_changed'];
for (var ev = 0; ev < info_window_events.length; ev++) {
(function(object, name) {
if (options.infoWindow[name]) {
google.maps.event.addListener(object, name, function(e){
options.infoWindow[name].apply(this, [e]);
});
}
})(marker.infoWindow, info_window_events[ev]);
}
}
var marker_events = ['animation_changed', 'clickable_changed', 'cursor_changed', 'draggable_changed', 'flat_changed', 'icon_changed', 'position_changed', 'shadow_changed', 'shape_changed', 'title_changed', 'visible_changed', 'zindex_changed'];
var marker_events_with_mouse = ['dblclick', 'drag', 'dragend', 'dragstart', 'mousedown', 'mouseout', 'mouseover', 'mouseup'];
for (var ev = 0; ev < marker_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(){
options[name].apply(this, [this]);
});
}
})(marker, marker_events[ev]);
}
for (var ev = 0; ev < marker_events_with_mouse.length; ev++) {
(function(map, object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(me){
if(!me.pixel){
me.pixel = map.getProjection().fromLatLngToPoint(me.latLng)
}
options[name].apply(this, [me]);
});
}
})(this.map, marker, marker_events_with_mouse[ev]);
}
google.maps.event.addListener(marker, 'click', function() {
this.details = details;
if (options.click) {
options.click.apply(this, [this]);
}
if (marker.infoWindow) {
self.hideInfoWindows();
marker.infoWindow.open(self.map, marker);
}
});
google.maps.event.addListener(marker, 'rightclick', function(e) {
e.marker = this;
if (options.rightclick) {
options.rightclick.apply(this, [e]);
}
if (window.context_menu[self.el.id]['marker'] != undefined) {
self.buildContextMenu('marker', e);
}
});
if (marker.fences) {
google.maps.event.addListener(marker, 'dragend', function() {
self.checkMarkerGeofence(marker, function(m, f) {
outside(m, f);
});
});
}
return marker;
};
GMaps.prototype.addMarker = function(options) {
var marker;
if(options.hasOwnProperty('gm_accessors_')) {
// Native google.maps.Marker object
marker = options;
}
else {
if ((options.hasOwnProperty('lat') && options.hasOwnProperty('lng')) || options.position) {
marker = this.createMarker(options);
}
else {
throw 'No latitude or longitude defined.';
}
}
marker.setMap(this.map);
if(this.markerClusterer) {
this.markerClusterer.addMarker(marker);
}
this.markers.push(marker);
GMaps.fire('marker_added', marker, this);
return marker;
};
GMaps.prototype.addMarkers = function(array) {
for (var i = 0, marker; marker=array[i]; i++) {
this.addMarker(marker);
}
return this.markers;
};
GMaps.prototype.hideInfoWindows = function() {
for (var i = 0, marker; marker = this.markers[i]; i++){
if (marker.infoWindow) {
marker.infoWindow.close();
}
}
};
GMaps.prototype.removeMarker = function(marker) {
for (var i = 0; i < this.markers.length; i++) {
if (this.markers[i] === marker) {
this.markers[i].setMap(null);
this.markers.splice(i, 1);
if(this.markerClusterer) {
this.markerClusterer.removeMarker(marker);
}
GMaps.fire('marker_removed', marker, this);
break;
}
}
return marker;
};
GMaps.prototype.removeMarkers = function (collection) {
var new_markers = [];
if (typeof collection == 'undefined') {
for (var i = 0; i < this.markers.length; i++) {
var marker = this.markers[i];
marker.setMap(null);
GMaps.fire('marker_removed', marker, this);
}
if(this.markerClusterer && this.markerClusterer.clearMarkers) {
this.markerClusterer.clearMarkers();
}
this.markers = new_markers;
}
else {
for (var i = 0; i < collection.length; i++) {
var index = this.markers.indexOf(collection[i]);
if (index > -1) {
var marker = this.markers[index];
marker.setMap(null);
if(this.markerClusterer) {
this.markerClusterer.removeMarker(marker);
}
GMaps.fire('marker_removed', marker, this);
}
}
for (var i = 0; i < this.markers.length; i++) {
var marker = this.markers[i];
if (marker.getMap() != null) {
new_markers.push(marker);
}
}
this.markers = new_markers;
}
};
GMaps.prototype.drawOverlay = function(options) {
var overlay = new google.maps.OverlayView(),
auto_show = true;
overlay.setMap(this.map);
if (options.auto_show != null) {
auto_show = options.auto_show;
}
overlay.onAdd = function() {
var el = document.createElement('div');
el.style.borderStyle = "none";
el.style.borderWidth = "0px";
el.style.position = "absolute";
el.style.zIndex = 100;
el.innerHTML = options.content;
overlay.el = el;
if (!options.layer) {
options.layer = 'overlayLayer';
}
var panes = this.getPanes(),
overlayLayer = panes[options.layer],
stop_overlay_events = ['contextmenu', 'DOMMouseScroll', 'dblclick', 'mousedown'];
overlayLayer.appendChild(el);
for (var ev = 0; ev < stop_overlay_events.length; ev++) {
(function(object, name) {
google.maps.event.addDomListener(object, name, function(e){
if (navigator.userAgent.toLowerCase().indexOf('msie') != -1 && document.all) {
e.cancelBubble = true;
e.returnValue = false;
}
else {
e.stopPropagation();
}
});
})(el, stop_overlay_events[ev]);
}
if (options.click) {
panes.overlayMouseTarget.appendChild(overlay.el);
google.maps.event.addDomListener(overlay.el, 'click', function() {
options.click.apply(overlay, [overlay]);
});
}
google.maps.event.trigger(this, 'ready');
};
overlay.draw = function() {
var projection = this.getProjection(),
pixel = projection.fromLatLngToDivPixel(new google.maps.LatLng(options.lat, options.lng));
options.horizontalOffset = options.horizontalOffset || 0;
options.verticalOffset = options.verticalOffset || 0;
var el = overlay.el,
content = el.children[0],
content_height = content.clientHeight,
content_width = content.clientWidth;
switch (options.verticalAlign) {
case 'top':
el.style.top = (pixel.y - content_height + options.verticalOffset) + 'px';
break;
default:
case 'middle':
el.style.top = (pixel.y - (content_height / 2) + options.verticalOffset) + 'px';
break;
case 'bottom':
el.style.top = (pixel.y + options.verticalOffset) + 'px';
break;
}
switch (options.horizontalAlign) {
case 'left':
el.style.left = (pixel.x - content_width + options.horizontalOffset) + 'px';
break;
default:
case 'center':
el.style.left = (pixel.x - (content_width / 2) + options.horizontalOffset) + 'px';
break;
case 'right':
el.style.left = (pixel.x + options.horizontalOffset) + 'px';
break;
}
el.style.display = auto_show ? 'block' : 'none';
if (!auto_show) {
options.show.apply(this, [el]);
}
};
overlay.onRemove = function() {
var el = overlay.el;
if (options.remove) {
options.remove.apply(this, [el]);
}
else {
overlay.el.parentNode.removeChild(overlay.el);
overlay.el = null;
}
};
this.overlays.push(overlay);
return overlay;
};
GMaps.prototype.removeOverlay = function(overlay) {
for (var i = 0; i < this.overlays.length; i++) {
if (this.overlays[i] === overlay) {
this.overlays[i].setMap(null);
this.overlays.splice(i, 1);
break;
}
}
};
GMaps.prototype.removeOverlays = function() {
for (var i = 0, item; item = this.overlays[i]; i++) {
item.setMap(null);
}
this.overlays = [];
};
GMaps.prototype.drawPolyline = function(options) {
var path = [],
points = options.path;
if (points.length) {
if (points[0][0] === undefined) {
path = points;
}
else {
for (var i = 0, latlng; latlng = points[i]; i++) {
path.push(new google.maps.LatLng(latlng[0], latlng[1]));
}
}
}
var polyline_options = {
map: this.map,
path: path,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight,
geodesic: options.geodesic,
clickable: true,
editable: false,
visible: true
};
if (options.hasOwnProperty("clickable")) {
polyline_options.clickable = options.clickable;
}
if (options.hasOwnProperty("editable")) {
polyline_options.editable = options.editable;
}
if (options.hasOwnProperty("icons")) {
polyline_options.icons = options.icons;
}
if (options.hasOwnProperty("zIndex")) {
polyline_options.zIndex = options.zIndex;
}
var polyline = new google.maps.Polyline(polyline_options);
var polyline_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick'];
for (var ev = 0; ev < polyline_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(e){
options[name].apply(this, [e]);
});
}
})(polyline, polyline_events[ev]);
}
this.polylines.push(polyline);
GMaps.fire('polyline_added', polyline, this);
return polyline;
};
GMaps.prototype.removePolyline = function(polyline) {
for (var i = 0; i < this.polylines.length; i++) {
if (this.polylines[i] === polyline) {
this.polylines[i].setMap(null);
this.polylines.splice(i, 1);
GMaps.fire('polyline_removed', polyline, this);
break;
}
}
};
GMaps.prototype.removePolylines = function() {
for (var i = 0, item; item = this.polylines[i]; i++) {
item.setMap(null);
}
this.polylines = [];
};
GMaps.prototype.drawCircle = function(options) {
options = extend_object({
map: this.map,
center: new google.maps.LatLng(options.lat, options.lng)
}, options);
delete options.lat;
delete options.lng;
var polygon = new google.maps.Circle(options),
polygon_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick'];
for (var ev = 0; ev < polygon_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(e){
options[name].apply(this, [e]);
});
}
})(polygon, polygon_events[ev]);
}
this.polygons.push(polygon);
return polygon;
};
GMaps.prototype.drawRectangle = function(options) {
options = extend_object({
map: this.map
}, options);
var latLngBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(options.bounds[0][0], options.bounds[0][1]),
new google.maps.LatLng(options.bounds[1][0], options.bounds[1][1])
);
options.bounds = latLngBounds;
var polygon = new google.maps.Rectangle(options),
polygon_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick'];
for (var ev = 0; ev < polygon_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(e){
options[name].apply(this, [e]);
});
}
})(polygon, polygon_events[ev]);
}
this.polygons.push(polygon);
return polygon;
};
GMaps.prototype.drawPolygon = function(options) {
var useGeoJSON = false;
if(options.hasOwnProperty("useGeoJSON")) {
useGeoJSON = options.useGeoJSON;
}
delete options.useGeoJSON;
options = extend_object({
map: this.map
}, options);
if (useGeoJSON == false) {
options.paths = [options.paths.slice(0)];
}
if (options.paths.length > 0) {
if (options.paths[0].length > 0) {
options.paths = array_flat(array_map(options.paths, arrayToLatLng, useGeoJSON));
}
}
var polygon = new google.maps.Polygon(options),
polygon_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick'];
for (var ev = 0; ev < polygon_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(e){
options[name].apply(this, [e]);
});
}
})(polygon, polygon_events[ev]);
}
this.polygons.push(polygon);
GMaps.fire('polygon_added', polygon, this);
return polygon;
};
GMaps.prototype.removePolygon = function(polygon) {
for (var i = 0; i < this.polygons.length; i++) {
if (this.polygons[i] === polygon) {
this.polygons[i].setMap(null);
this.polygons.splice(i, 1);
GMaps.fire('polygon_removed', polygon, this);
break;
}
}
};
GMaps.prototype.removePolygons = function() {
for (var i = 0, item; item = this.polygons[i]; i++) {
item.setMap(null);
}
this.polygons = [];
};
GMaps.prototype.getFromFusionTables = function(options) {
var events = options.events;
delete options.events;
var fusion_tables_options = options,
layer = new google.maps.FusionTablesLayer(fusion_tables_options);
for (var ev in events) {
(function(object, name) {
google.maps.event.addListener(object, name, function(e) {
events[name].apply(this, [e]);
});
})(layer, ev);
}
this.layers.push(layer);
return layer;
};
GMaps.prototype.loadFromFusionTables = function(options) {
var layer = this.getFromFusionTables(options);
layer.setMap(this.map);
return layer;
};
GMaps.prototype.getFromKML = function(options) {
var url = options.url,
events = options.events;
delete options.url;
delete options.events;
var kml_options = options,
layer = new google.maps.KmlLayer(url, kml_options);
for (var ev in events) {
(function(object, name) {
google.maps.event.addListener(object, name, function(e) {
events[name].apply(this, [e]);
});
})(layer, ev);
}
this.layers.push(layer);
return layer;
};
GMaps.prototype.loadFromKML = function(options) {
var layer = this.getFromKML(options);
layer.setMap(this.map);
return layer;
};
GMaps.prototype.addLayer = function(layerName, options) {
//var default_layers = ['weather', 'clouds', 'traffic', 'transit', 'bicycling', 'panoramio', 'places'];
options = options || {};
var layer;
switch(layerName) {
case 'weather': this.singleLayers.weather = layer = new google.maps.weather.WeatherLayer();
break;
case 'clouds': this.singleLayers.clouds = layer = new google.maps.weather.CloudLayer();
break;
case 'traffic': this.singleLayers.traffic = layer = new google.maps.TrafficLayer();
break;
case 'transit': this.singleLayers.transit = layer = new google.maps.TransitLayer();
break;
case 'bicycling': this.singleLayers.bicycling = layer = new google.maps.BicyclingLayer();
break;
case 'panoramio':
this.singleLayers.panoramio = layer = new google.maps.panoramio.PanoramioLayer();
layer.setTag(options.filter);
delete options.filter;
//click event
if (options.click) {
google.maps.event.addListener(layer, 'click', function(event) {
options.click(event);
delete options.click;
});
}
break;
case 'places':
this.singleLayers.places = layer = new google.maps.places.PlacesService(this.map);
//search, nearbySearch, radarSearch callback, Both are the same
if (options.search || options.nearbySearch || options.radarSearch) {
var placeSearchRequest = {
bounds : options.bounds || null,
keyword : options.keyword || null,
location : options.location || null,
name : options.name || null,
radius : options.radius || null,
rankBy : options.rankBy || null,
types : options.types || null
};
if (options.radarSearch) {
layer.radarSearch(placeSearchRequest, options.radarSearch);
}
if (options.search) {
layer.search(placeSearchRequest, options.search);
}
if (options.nearbySearch) {
layer.nearbySearch(placeSearchRequest, options.nearbySearch);
}
}
//textSearch callback
if (options.textSearch) {
var textSearchRequest = {
bounds : options.bounds || null,
location : options.location || null,
query : options.query || null,
radius : options.radius || null
};
layer.textSearch(textSearchRequest, options.textSearch);
}
break;
}
if (layer !== undefined) {
if (typeof layer.setOptions == 'function') {
layer.setOptions(options);
}
if (typeof layer.setMap == 'function') {
layer.setMap(this.map);
}
return layer;
}
};
GMaps.prototype.removeLayer = function(layer) {
if (typeof(layer) == "string" && this.singleLayers[layer] !== undefined) {
this.singleLayers[layer].setMap(null);
delete this.singleLayers[layer];
}
else {
for (var i = 0; i < this.layers.length; i++) {
if (this.layers[i] === layer) {
this.layers[i].setMap(null);
this.layers.splice(i, 1);
break;
}
}
}
};
var travelMode, unitSystem;
GMaps.prototype.getRoutes = function(options) {
switch (options.travelMode) {
case 'bicycling':
travelMode = google.maps.TravelMode.BICYCLING;
break;
case 'transit':
travelMode = google.maps.TravelMode.TRANSIT;
break;
case 'driving':
travelMode = google.maps.TravelMode.DRIVING;
break;
default:
travelMode = google.maps.TravelMode.WALKING;
break;
}
if (options.unitSystem === 'imperial') {
unitSystem = google.maps.UnitSystem.IMPERIAL;
}
else {
unitSystem = google.maps.UnitSystem.METRIC;
}
var base_options = {
avoidHighways: false,
avoidTolls: false,
optimizeWaypoints: false,
waypoints: []
},
request_options = extend_object(base_options, options);
request_options.origin = /string/.test(typeof options.origin) ? options.origin : new google.maps.LatLng(options.origin[0], options.origin[1]);
request_options.destination = /string/.test(typeof options.destination) ? options.destination : new google.maps.LatLng(options.destination[0], options.destination[1]);
request_options.travelMode = travelMode;
request_options.unitSystem = unitSystem;
delete request_options.callback;
delete request_options.error;
var self = this,
routes = [],
service = new google.maps.DirectionsService();
service.route(request_options, function(result, status) {
if (status === google.maps.DirectionsStatus.OK) {
for (var r in result.routes) {
if (result.routes.hasOwnProperty(r)) {
routes.push(result.routes[r]);
}
}
if (options.callback) {
options.callback(routes, result, status);
}
}
else {
if (options.error) {
options.error(result, status);
}
}
});
};
GMaps.prototype.removeRoutes = function() {
this.routes.length = 0;
};
GMaps.prototype.getElevations = function(options) {
options = extend_object({
locations: [],
path : false,
samples : 256
}, options);
if (options.locations.length > 0) {
if (options.locations[0].length > 0) {
options.locations = array_flat(array_map([options.locations], arrayToLatLng, false));
}
}
var callback = options.callback;
delete options.callback;
var service = new google.maps.ElevationService();
//location request
if (!options.path) {
delete options.path;
delete options.samples;
service.getElevationForLocations(options, function(result, status) {
if (callback && typeof(callback) === "function") {
callback(result, status);
}
});
//path request
} else {
var pathRequest = {
path : options.locations,
samples : options.samples
};
service.getElevationAlongPath(pathRequest, function(result, status) {
if (callback && typeof(callback) === "function") {
callback(result, status);
}
});
}
};
GMaps.prototype.cleanRoute = GMaps.prototype.removePolylines;
GMaps.prototype.renderRoute = function(options, renderOptions) {
var self = this,
panel = ((typeof renderOptions.panel === 'string') ? document.getElementById(renderOptions.panel.replace('#', '')) : renderOptions.panel),
display;
renderOptions.panel = panel;
renderOptions = extend_object({
map: this.map
}, renderOptions);
display = new google.maps.DirectionsRenderer(renderOptions);
this.getRoutes({
origin: options.origin,
destination: options.destination,
travelMode: options.travelMode,
waypoints: options.waypoints,
unitSystem: options.unitSystem,
error: options.error,
avoidHighways: options.avoidHighways,
avoidTolls: options.avoidTolls,
optimizeWaypoints: options.optimizeWaypoints,
callback: function(routes, response, status) {
if (status === google.maps.DirectionsStatus.OK) {
display.setDirections(response);
}
}
});
};
GMaps.prototype.drawRoute = function(options) {
var self = this;
this.getRoutes({
origin: options.origin,
destination: options.destination,
travelMode: options.travelMode,
waypoints: options.waypoints,
unitSystem: options.unitSystem,
error: options.error,
avoidHighways: options.avoidHighways,
avoidTolls: options.avoidTolls,
optimizeWaypoints: options.optimizeWaypoints,
callback: function(routes) {
if (routes.length > 0) {
var polyline_options = {
path: routes[routes.length - 1].overview_path,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight
};
if (options.hasOwnProperty("icons")) {
polyline_options.icons = options.icons;
}
self.drawPolyline(polyline_options);
if (options.callback) {
options.callback(routes[routes.length - 1]);
}
}
}
});
};
GMaps.prototype.travelRoute = function(options) {
if (options.origin && options.destination) {
this.getRoutes({
origin: options.origin,
destination: options.destination,
travelMode: options.travelMode,
waypoints : options.waypoints,
unitSystem: options.unitSystem,
error: options.error,
callback: function(e) {
//start callback
if (e.length > 0 && options.start) {
options.start(e[e.length - 1]);
}
//step callback
if (e.length > 0 && options.step) {
var route = e[e.length - 1];
if (route.legs.length > 0) {
var steps = route.legs[0].steps;
for (var i = 0, step; step = steps[i]; i++) {
step.step_number = i;
options.step(step, (route.legs[0].steps.length - 1));
}
}
}
//end callback
if (e.length > 0 && options.end) {
options.end(e[e.length - 1]);
}
}
});
}
else if (options.route) {
if (options.route.legs.length > 0) {
var steps = options.route.legs[0].steps;
for (var i = 0, step; step = steps[i]; i++) {
step.step_number = i;
options.step(step);
}
}
}
};
GMaps.prototype.drawSteppedRoute = function(options) {
var self = this;
if (options.origin && options.destination) {
this.getRoutes({
origin: options.origin,
destination: options.destination,
travelMode: options.travelMode,
waypoints : options.waypoints,
error: options.error,
callback: function(e) {
//start callback
if (e.length > 0 && options.start) {
options.start(e[e.length - 1]);
}
//step callback
if (e.length > 0 && options.step) {
var route = e[e.length - 1];
if (route.legs.length > 0) {
var steps = route.legs[0].steps;
for (var i = 0, step; step = steps[i]; i++) {
step.step_number = i;
var polyline_options = {
path: step.path,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight
};
if (options.hasOwnProperty("icons")) {
polyline_options.icons = options.icons;
}
self.drawPolyline(polyline_options);
options.step(step, (route.legs[0].steps.length - 1));
}
}
}
//end callback
if (e.length > 0 && options.end) {
options.end(e[e.length - 1]);
}
}
});
}
else if (options.route) {
if (options.route.legs.length > 0) {
var steps = options.route.legs[0].steps;
for (var i = 0, step; step = steps[i]; i++) {
step.step_number = i;
var polyline_options = {
path: step.path,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight
};
if (options.hasOwnProperty("icons")) {
polyline_options.icons = options.icons;
}
self.drawPolyline(polyline_options);
options.step(step);
}
}
}
};
GMaps.Route = function(options) {
this.origin = options.origin;
this.destination = options.destination;
this.waypoints = options.waypoints;
this.map = options.map;
this.route = options.route;
this.step_count = 0;
this.steps = this.route.legs[0].steps;
this.steps_length = this.steps.length;
var polyline_options = {
path: new google.maps.MVCArray(),
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight
};
if (options.hasOwnProperty("icons")) {
polyline_options.icons = options.icons;
}
this.polyline = this.map.drawPolyline(polyline_options).getPath();
};
GMaps.Route.prototype.getRoute = function(options) {
var self = this;
this.map.getRoutes({
origin : this.origin,
destination : this.destination,
travelMode : options.travelMode,
waypoints : this.waypoints || [],
error: options.error,
callback : function() {
self.route = e[0];
if (options.callback) {
options.callback.call(self);
}
}
});
};
GMaps.Route.prototype.back = function() {
if (this.step_count > 0) {
this.step_count--;
var path = this.route.legs[0].steps[this.step_count].path;
for (var p in path){
if (path.hasOwnProperty(p)){
this.polyline.pop();
}
}
}
};
GMaps.Route.prototype.forward = function() {
if (this.step_count < this.steps_length) {
var path = this.route.legs[0].steps[this.step_count].path;
for (var p in path){
if (path.hasOwnProperty(p)){
this.polyline.push(path[p]);
}
}
this.step_count++;
}
};
GMaps.prototype.checkGeofence = function(lat, lng, fence) {
return fence.containsLatLng(new google.maps.LatLng(lat, lng));
};
GMaps.prototype.checkMarkerGeofence = function(marker, outside_callback) {
if (marker.fences) {
for (var i = 0, fence; fence = marker.fences[i]; i++) {
var pos = marker.getPosition();
if (!this.checkGeofence(pos.lat(), pos.lng(), fence)) {
outside_callback(marker, fence);
}
}
}
};
GMaps.prototype.toImage = function(options) {
var options = options || {},
static_map_options = {};
static_map_options['size'] = options['size'] || [this.el.clientWidth, this.el.clientHeight];
static_map_options['lat'] = this.getCenter().lat();
static_map_options['lng'] = this.getCenter().lng();
if (this.markers.length > 0) {
static_map_options['markers'] = [];
for (var i = 0; i < this.markers.length; i++) {
static_map_options['markers'].push({
lat: this.markers[i].getPosition().lat(),
lng: this.markers[i].getPosition().lng()
});
}
}
if (this.polylines.length > 0) {
var polyline = this.polylines[0];
static_map_options['polyline'] = {};
static_map_options['polyline']['path'] = google.maps.geometry.encoding.encodePath(polyline.getPath());
static_map_options['polyline']['strokeColor'] = polyline.strokeColor
static_map_options['polyline']['strokeOpacity'] = polyline.strokeOpacity
static_map_options['polyline']['strokeWeight'] = polyline.strokeWeight
}
return GMaps.staticMapURL(static_map_options);
};
GMaps.staticMapURL = function(options){
var parameters = [],
data,
static_root = (location.protocol === 'file:' ? 'http:' : location.protocol ) + '//maps.googleapis.com/maps/api/staticmap';
if (options.url) {
static_root = options.url;
delete options.url;
}
static_root += '?';
var markers = options.markers;
delete options.markers;
if (!markers && options.marker) {
markers = [options.marker];
delete options.marker;
}
var styles = options.styles;
delete options.styles;
var polyline = options.polyline;
delete options.polyline;
/** Map options **/
if (options.center) {
parameters.push('center=' + options.center);
delete options.center;
}
else if (options.address) {
parameters.push('center=' + options.address);
delete options.address;
}
else if (options.lat) {
parameters.push(['center=', options.lat, ',', options.lng].join(''));
delete options.lat;
delete options.lng;
}
else if (options.visible) {
var visible = encodeURI(options.visible.join('|'));
parameters.push('visible=' + visible);
}
var size = options.size;
if (size) {
if (size.join) {
size = size.join('x');
}
delete options.size;
}
else {
size = '630x300';
}
parameters.push('size=' + size);
if (!options.zoom && options.zoom !== false) {
options.zoom = 15;
}
var sensor = options.hasOwnProperty('sensor') ? !!options.sensor : true;
delete options.sensor;
parameters.push('sensor=' + sensor);
for (var param in options) {
if (options.hasOwnProperty(param)) {
parameters.push(param + '=' + options[param]);
}
}
/** Markers **/
if (markers) {
var marker, loc;
for (var i = 0; data = markers[i]; i++) {
marker = [];
if (data.size && data.size !== 'normal') {
marker.push('size:' + data.size);
delete data.size;
}
else if (data.icon) {
marker.push('icon:' + encodeURI(data.icon));
delete data.icon;
}
if (data.color) {
marker.push('color:' + data.color.replace('#', '0x'));
delete data.color;
}
if (data.label) {
marker.push('label:' + data.label[0].toUpperCase());
delete data.label;
}
loc = (data.address ? data.address : data.lat + ',' + data.lng);
delete data.address;
delete data.lat;
delete data.lng;
for(var param in data){
if (data.hasOwnProperty(param)) {
marker.push(param + ':' + data[param]);
}
}
if (marker.length || i === 0) {
marker.push(loc);
marker = marker.join('|');
parameters.push('markers=' + encodeURI(marker));
}
// New marker without styles
else {
marker = parameters.pop() + encodeURI('|' + loc);
parameters.push(marker);
}
}
}
/** Map Styles **/
if (styles) {
for (var i = 0; i < styles.length; i++) {
var styleRule = [];
if (styles[i].featureType){
styleRule.push('feature:' + styles[i].featureType.toLowerCase());
}
if (styles[i].elementType) {
styleRule.push('element:' + styles[i].elementType.toLowerCase());
}
for (var j = 0; j < styles[i].stylers.length; j++) {
for (var p in styles[i].stylers[j]) {
var ruleArg = styles[i].stylers[j][p];
if (p == 'hue' || p == 'color') {
ruleArg = '0x' + ruleArg.substring(1);
}
styleRule.push(p + ':' + ruleArg);
}
}
var rule = styleRule.join('|');
if (rule != '') {
parameters.push('style=' + rule);
}
}
}
/** Polylines **/
function parseColor(color, opacity) {
if (color[0] === '#'){
color = color.replace('#', '0x');
if (opacity) {
opacity = parseFloat(opacity);
opacity = Math.min(1, Math.max(opacity, 0));
if (opacity === 0) {
return '0x00000000';
}
opacity = (opacity * 255).toString(16);
if (opacity.length === 1) {
opacity += opacity;
}
color = color.slice(0,8) + opacity;
}
}
return color;
}
if (polyline) {
data = polyline;
polyline = [];
if (data.strokeWeight) {
polyline.push('weight:' + parseInt(data.strokeWeight, 10));
}
if (data.strokeColor) {
var color = parseColor(data.strokeColor, data.strokeOpacity);
polyline.push('color:' + color);
}
if (data.fillColor) {
var fillcolor = parseColor(data.fillColor, data.fillOpacity);
polyline.push('fillcolor:' + fillcolor);
}
var path = data.path;
if (path.join) {
for (var j=0, pos; pos=path[j]; j++) {
polyline.push(pos.join(','));
}
}
else {
polyline.push('enc:' + path);
}
polyline = polyline.join('|');
parameters.push('path=' + encodeURI(polyline));
}
/** Retina support **/
var dpi = window.devicePixelRatio || 1;
parameters.push('scale=' + dpi);
parameters = parameters.join('&');
return static_root + parameters;
};
GMaps.prototype.addMapType = function(mapTypeId, options) {
if (options.hasOwnProperty("getTileUrl") && typeof(options["getTileUrl"]) == "function") {
options.tileSize = options.tileSize || new google.maps.Size(256, 256);
var mapType = new google.maps.ImageMapType(options);
this.map.mapTypes.set(mapTypeId, mapType);
}
else {
throw "'getTileUrl' function required.";
}
};
GMaps.prototype.addOverlayMapType = function(options) {
if (options.hasOwnProperty("getTile") && typeof(options["getTile"]) == "function") {
var overlayMapTypeIndex = options.index;
delete options.index;
this.map.overlayMapTypes.insertAt(overlayMapTypeIndex, options);
}
else {
throw "'getTile' function required.";
}
};
GMaps.prototype.removeOverlayMapType = function(overlayMapTypeIndex) {
this.map.overlayMapTypes.removeAt(overlayMapTypeIndex);
};
GMaps.prototype.addStyle = function(options) {
var styledMapType = new google.maps.StyledMapType(options.styles, { name: options.styledMapName });
this.map.mapTypes.set(options.mapTypeId, styledMapType);
};
GMaps.prototype.setStyle = function(mapTypeId) {
this.map.setMapTypeId(mapTypeId);
};
GMaps.prototype.createPanorama = function(streetview_options) {
if (!streetview_options.hasOwnProperty('lat') || !streetview_options.hasOwnProperty('lng')) {
streetview_options.lat = this.getCenter().lat();
streetview_options.lng = this.getCenter().lng();
}
this.panorama = GMaps.createPanorama(streetview_options);
this.map.setStreetView(this.panorama);
return this.panorama;
};
GMaps.createPanorama = function(options) {
var el = getElementById(options.el, options.context);
options.position = new google.maps.LatLng(options.lat, options.lng);
delete options.el;
delete options.context;
delete options.lat;
delete options.lng;
var streetview_events = ['closeclick', 'links_changed', 'pano_changed', 'position_changed', 'pov_changed', 'resize', 'visible_changed'],
streetview_options = extend_object({visible : true}, options);
for (var i = 0; i < streetview_events.length; i++) {
delete streetview_options[streetview_events[i]];
}
var panorama = new google.maps.StreetViewPanorama(el, streetview_options);
for (var i = 0; i < streetview_events.length; i++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(){
options[name].apply(this);
});
}
})(panorama, streetview_events[i]);
}
return panorama;
};
GMaps.prototype.on = function(event_name, handler) {
return GMaps.on(event_name, this, handler);
};
GMaps.prototype.off = function(event_name) {
GMaps.off(event_name, this);
};
GMaps.prototype.once = function(event_name, handler) {
return GMaps.once(event_name, this, handler);
};
GMaps.custom_events = ['marker_added', 'marker_removed', 'polyline_added', 'polyline_removed', 'polygon_added', 'polygon_removed', 'geolocated', 'geolocation_failed'];
GMaps.on = function(event_name, object, handler) {
if (GMaps.custom_events.indexOf(event_name) == -1) {
if(object instanceof GMaps) object = object.map;
return google.maps.event.addListener(object, event_name, handler);
}
else {
var registered_event = {
handler : handler,
eventName : event_name
};
object.registered_events[event_name] = object.registered_events[event_name] || [];
object.registered_events[event_name].push(registered_event);
return registered_event;
}
};
GMaps.off = function(event_name, object) {
if (GMaps.custom_events.indexOf(event_name) == -1) {
if(object instanceof GMaps) object = object.map;
google.maps.event.clearListeners(object, event_name);
}
else {
object.registered_events[event_name] = [];
}
};
GMaps.once = function(event_name, object, handler) {
if (GMaps.custom_events.indexOf(event_name) == -1) {
if(object instanceof GMaps) object = object.map;
return google.maps.event.addListenerOnce(object, event_name, handler);
}
};
GMaps.fire = function(event_name, object, scope) {
if (GMaps.custom_events.indexOf(event_name) == -1) {
google.maps.event.trigger(object, event_name, Array.prototype.slice.apply(arguments).slice(2));
}
else {
if(event_name in scope.registered_events) {
var firing_events = scope.registered_events[event_name];
for(var i = 0; i < firing_events.length; i++) {
(function(handler, scope, object) {
handler.apply(scope, [object]);
})(firing_events[i]['handler'], scope, object);
}
}
}
};
GMaps.geolocate = function(options) {
var complete_callback = options.always || options.complete;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
options.success(position);
if (complete_callback) {
complete_callback();
}
}, function(error) {
options.error(error);
if (complete_callback) {
complete_callback();
}
}, options.options);
}
else {
options.not_supported();
if (complete_callback) {
complete_callback();
}
}
};
GMaps.geocode = function(options) {
this.geocoder = new google.maps.Geocoder();
var callback = options.callback;
if (options.hasOwnProperty('lat') && options.hasOwnProperty('lng')) {
options.latLng = new google.maps.LatLng(options.lat, options.lng);
}
delete options.lat;
delete options.lng;
delete options.callback;
this.geocoder.geocode(options, function(results, status) {
callback(results, status);
});
};
if (typeof window.google === 'object' && window.google.maps) {
//==========================
// Polygon containsLatLng
// https://github.com/tparkin/Google-Maps-Point-in-Polygon
// Poygon getBounds extension - google-maps-extensions
// http://code.google.com/p/google-maps-extensions/source/browse/google.maps.Polygon.getBounds.js
if (!google.maps.Polygon.prototype.getBounds) {
google.maps.Polygon.prototype.getBounds = function(latLng) {
var bounds = new google.maps.LatLngBounds();
var paths = this.getPaths();
var path;
for (var p = 0; p < paths.getLength(); p++) {
path = paths.getAt(p);
for (var i = 0; i < path.getLength(); i++) {
bounds.extend(path.getAt(i));
}
}
return bounds;
};
}
if (!google.maps.Polygon.prototype.containsLatLng) {
// Polygon containsLatLng - method to determine if a latLng is within a polygon
google.maps.Polygon.prototype.containsLatLng = function(latLng) {
// Exclude points outside of bounds as there is no way they are in the poly
var bounds = this.getBounds();
if (bounds !== null && !bounds.contains(latLng)) {
return false;
}
// Raycast point in polygon method
var inPoly = false;
var numPaths = this.getPaths().getLength();
for (var p = 0; p < numPaths; p++) {
var path = this.getPaths().getAt(p);
var numPoints = path.getLength();
var j = numPoints - 1;
for (var i = 0; i < numPoints; i++) {
var vertex1 = path.getAt(i);
var vertex2 = path.getAt(j);
if (vertex1.lng() < latLng.lng() && vertex2.lng() >= latLng.lng() || vertex2.lng() < latLng.lng() && vertex1.lng() >= latLng.lng()) {
if (vertex1.lat() + (latLng.lng() - vertex1.lng()) / (vertex2.lng() - vertex1.lng()) * (vertex2.lat() - vertex1.lat()) < latLng.lat()) {
inPoly = !inPoly;
}
}
j = i;
}
}
return inPoly;
};
}
if (!google.maps.Circle.prototype.containsLatLng) {
google.maps.Circle.prototype.containsLatLng = function(latLng) {
if (google.maps.geometry) {
return google.maps.geometry.spherical.computeDistanceBetween(this.getCenter(), latLng) <= this.getRadius();
}
else {
return true;
}
};
}
google.maps.Rectangle.prototype.containsLatLng = function(latLng) {
return this.getBounds().contains(latLng);
};
google.maps.LatLngBounds.prototype.containsLatLng = function(latLng) {
return this.contains(latLng);
};
google.maps.Marker.prototype.setFences = function(fences) {
this.fences = fences;
};
google.maps.Marker.prototype.addFence = function(fence) {
this.fences.push(fence);
};
google.maps.Marker.prototype.getId = function() {
return this['__gm_id'];
};
}
//==========================
// Array indexOf
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/indexOf
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
"use strict";
if (this == null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (len === 0) {
return -1;
}
var n = 0;
if (arguments.length > 1) {
n = Number(arguments[1]);
if (n != n) { // shortcut for verifying if it's NaN
n = 0;
} else if (n != 0 && n != Infinity && n != -Infinity) {
n = (n > 0 || -1) * Math.floor(Math.abs(n));
}
}
if (n >= len) {
return -1;
}
var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
for (; k < len; k++) {
if (k in t && t[k] === searchElement) {
return k;
}
}
return -1;
}
}
return GMaps;
}));
Validation
approve.js
Audio
howlerjs.com - Cross Plattform Audio
