/*! swipebox v1.4.4 | constantin saguin csag.co | mit license | github.com/brutaldesign/swipebox */ ;( function ( window, document, $, undefined ) { $.swipebox = function( elem, options ) { // default options var ui, defaults = { usecss : true, usesvg : true, initialindexonarray : 0, removebarsonmobile : true, hideclosebuttononmobile : false, hidebarsdelay : 3000, videomaxwidth : 1140, vimeocolor : 'cccccc', beforeopen: null, afteropen: null, afterclose: null, aftermedia: null, nextslide: null, prevslide: null, loopatend: false, autoplayvideos: false, querystringdata: {}, toggleclassonload: '' }, plugin = this, elements = [], // slides array [ { href:'...', title:'...' }, ...], $elem, selector = elem.selector, ismobile = navigator.useragent.match( /(ipad)|(iphone)|(ipod)|(android)|(playbook)|(bb10)|(blackberry)|(opera mini)|(iemobile)|(webos)|(meego)/i ), istouch = ismobile !== null || document.createtouch !== undefined || ( 'ontouchstart' in window ) || ( 'onmsgesturechange' in window ) || navigator.msmaxtouchpoints, supportsvg = !! document.createelementns && !! document.createelementns( 'http://www.w3.org/2000/svg', 'svg').createsvgrect, winwidth = window.innerwidth ? window.innerwidth : $( window ).width(), winheight = window.innerheight ? window.innerheight : $( window ).height(), currentx = 0, /* jshint multistr: true */ html = '
\
\
\
\
\
\
\
\ \ \
\
\ \
\
'; plugin.settings = {}; $.swipebox.close = function () { ui.closeslide(); }; $.swipebox.extend = function () { return ui; }; plugin.init = function() { plugin.settings = $.extend( {}, defaults, options ); if ( $.isarray( elem ) ) { elements = elem; ui.target = $( window ); ui.init( plugin.settings.initialindexonarray ); } else { $( document ).on( 'click', selector, function( event ) { // console.log( istouch ); if ( event.target.parentnode.classname === 'slide current' ) { return false; } if ( ! $.isarray( elem ) ) { ui.destroy(); $elem = $( selector ); ui.actions(); } elements = []; var index, reltype, relval; // allow for html5 compliant attribute before legacy use of rel if ( ! relval ) { reltype = 'data-rel'; relval = $( this ).attr( reltype ); } if ( ! relval ) { reltype = 'rel'; relval = $( this ).attr( reltype ); } if ( relval && relval !== '' && relval !== 'nofollow' ) { $elem = $( selector ).filter( '[' + reltype + '="' + relval + '"]' ); } else { $elem = $( selector ); } $elem.each( function() { var title = null, href = null; if ( $( this ).attr( 'title' ) ) { title = $( this ).attr( 'title' ); } if ( $( this ).attr( 'href' ) ) { href = $( this ).attr( 'href' ); } elements.push( { href: href, title: title } ); } ); index = $elem.index( $( this ) ); event.preventdefault(); event.stoppropagation(); ui.target = $( event.target ); ui.init( index ); } ); } }; ui = { /** * initiate swipebox */ init : function( index ) { if ( plugin.settings.beforeopen ) { plugin.settings.beforeopen(); } this.target.trigger( 'swipebox-start' ); $.swipebox.isopen = true; this.build(); this.openslide( index ); this.openmedia( index ); this.preloadmedia( index+1 ); this.preloadmedia( index-1 ); if ( plugin.settings.afteropen ) { plugin.settings.afteropen(index); } }, /** * built html containers and fire main functions */ build : function () { var $this = this, bg; $( 'body' ).append( html ); if ( supportsvg && plugin.settings.usesvg === true ) { bg = $( '#swipebox-close' ).css( 'background-image' ); bg = bg.replace( 'png', 'svg' ); $( '#swipebox-prev, #swipebox-next, #swipebox-close' ).css( { 'background-image' : bg } ); } if ( ismobile && plugin.settings.removebarsonmobile ) { $( '#swipebox-bottom-bar, #swipebox-top-bar' ).remove(); } $.each( elements, function() { $( '#swipebox-slider' ).append( '
' ); } ); $this.setdim(); $this.actions(); if ( istouch ) { $this.gesture(); } // devices can have both touch and keyboard input so always allow key events $this.keyboard(); $this.animbars(); $this.resize(); }, /** * set dimensions depending on windows width and height */ setdim : function () { var width, height, slidercss = {}; // reset dimensions on mobile orientation change if ( 'onorientationchange' in window ) { window.addeventlistener( 'orientationchange', function() { if ( window.orientation === 0 ) { width = winwidth; height = winheight; } else if ( window.orientation === 90 || window.orientation === -90 ) { width = winheight; height = winwidth; } }, false ); } else { width = window.innerwidth ? window.innerwidth : $( window ).width(); height = window.innerheight ? window.innerheight : $( window ).height(); } slidercss = { width : width, height : height }; $( '#swipebox-overlay' ).css( slidercss ); }, /** * reset dimensions on window resize envent */ resize : function () { var $this = this; $( window ).resize( function() { $this.setdim(); } ).resize(); }, /** * check if device supports css transitions */ supporttransition : function () { var prefixes = 'transition webkittransition moztransition otransition mstransition khtmltransition'.split( ' ' ), i; for ( i = 0; i < prefixes.length; i++ ) { if ( document.createelement( 'div' ).style[ prefixes[i] ] !== undefined ) { return prefixes[i]; } } return false; }, /** * check if css transitions are allowed (options + devicesupport) */ docsstrans : function () { if ( plugin.settings.usecss && this.supporttransition() ) { return true; } }, /** * touch navigation */ gesture : function () { var $this = this, index, hdistance, vdistance, hdistancelast, vdistancelast, hdistancepercent, vswipe = false, hswipe = false, hswipmindistance = 10, vswipmindistance = 50, startcoords = {}, endcoords = {}, bars = $( '#swipebox-top-bar, #swipebox-bottom-bar' ), slider = $( '#swipebox-slider' ); bars.addclass( 'visible-bars' ); $this.settimeout(); $( 'body' ).bind( 'touchstart', function( event ) { $( this ).addclass( 'touching' ); index = $( '#swipebox-slider .slide' ).index( $( '#swipebox-slider .slide.current' ) ); endcoords = event.originalevent.targettouches[0]; startcoords.pagex = event.originalevent.targettouches[0].pagex; startcoords.pagey = event.originalevent.targettouches[0].pagey; $( '#swipebox-slider' ).css( { '-webkit-transform' : 'translate3d(' + currentx +'%, 0, 0)', 'transform' : 'translate3d(' + currentx + '%, 0, 0)' } ); $( '.touching' ).bind( 'touchmove',function( event ) { event.preventdefault(); event.stoppropagation(); endcoords = event.originalevent.targettouches[0]; if ( ! hswipe ) { vdistancelast = vdistance; vdistance = endcoords.pagey - startcoords.pagey; if ( math.abs( vdistance ) >= vswipmindistance || vswipe ) { var opacity = 0.75 - math.abs(vdistance) / slider.height(); slider.css( { 'top': vdistance + 'px' } ); slider.css( { 'opacity': opacity } ); vswipe = true; } } hdistancelast = hdistance; hdistance = endcoords.pagex - startcoords.pagex; hdistancepercent = hdistance * 100 / winwidth; if ( ! hswipe && ! vswipe && math.abs( hdistance ) >= hswipmindistance ) { $( '#swipebox-slider' ).css( { '-webkit-transition' : '', 'transition' : '' } ); hswipe = true; } if ( hswipe ) { // swipe left if ( 0 < hdistance ) { // first slide if ( 0 === index ) { // console.log( 'first' ); $( '#swipebox-overlay' ).addclass( 'leftspringtouch' ); } else { // follow gesture $( '#swipebox-overlay' ).removeclass( 'leftspringtouch' ).removeclass( 'rightspringtouch' ); $( '#swipebox-slider' ).css( { '-webkit-transform' : 'translate3d(' + ( currentx + hdistancepercent ) +'%, 0, 0)', 'transform' : 'translate3d(' + ( currentx + hdistancepercent ) + '%, 0, 0)' } ); } // swipe rught } else if ( 0 > hdistance ) { // last slide if ( elements.length === index +1 ) { // console.log( 'last' ); $( '#swipebox-overlay' ).addclass( 'rightspringtouch' ); } else { $( '#swipebox-overlay' ).removeclass( 'leftspringtouch' ).removeclass( 'rightspringtouch' ); $( '#swipebox-slider' ).css( { '-webkit-transform' : 'translate3d(' + ( currentx + hdistancepercent ) +'%, 0, 0)', 'transform' : 'translate3d(' + ( currentx + hdistancepercent ) + '%, 0, 0)' } ); } } } } ); return false; } ).bind( 'touchend',function( event ) { event.preventdefault(); event.stoppropagation(); $( '#swipebox-slider' ).css( { '-webkit-transition' : '-webkit-transform 0.4s ease', 'transition' : 'transform 0.4s ease' } ); vdistance = endcoords.pagey - startcoords.pagey; hdistance = endcoords.pagex - startcoords.pagex; hdistancepercent = hdistance*100/winwidth; // swipe to bottom to close if ( vswipe ) { vswipe = false; if ( math.abs( vdistance ) >= 2 * vswipmindistance && math.abs( vdistance ) > math.abs( vdistancelast ) ) { var voffset = vdistance > 0 ? slider.height() : - slider.height(); slider.animate( { top: voffset + 'px', 'opacity': 0 }, 300, function () { $this.closeslide(); } ); } else { slider.animate( { top: 0, 'opacity': 1 }, 300 ); } } else if ( hswipe ) { hswipe = false; // swipeleft if( hdistance >= hswipmindistance && hdistance >= hdistancelast) { $this.getprev(); // swiperight } else if ( hdistance <= -hswipmindistance && hdistance <= hdistancelast) { $this.getnext(); } } else { // top and bottom bars have been removed on touchable devices // tap if ( ! bars.hasclass( 'visible-bars' ) ) { $this.showbars(); $this.settimeout(); } else { $this.cleartimeout(); $this.hidebars(); } } $( '#swipebox-slider' ).css( { '-webkit-transform' : 'translate3d(' + currentx + '%, 0, 0)', 'transform' : 'translate3d(' + currentx + '%, 0, 0)' } ); $( '#swipebox-overlay' ).removeclass( 'leftspringtouch' ).removeclass( 'rightspringtouch' ); $( '.touching' ).off( 'touchmove' ).removeclass( 'touching' ); } ); }, /** * set timer to hide the action bars */ settimeout: function () { if ( plugin.settings.hidebarsdelay > 0 ) { var $this = this; $this.cleartimeout(); $this.timeout = window.settimeout( function() { $this.hidebars(); }, plugin.settings.hidebarsdelay ); } }, /** * clear timer */ cleartimeout: function () { window.cleartimeout( this.timeout ); this.timeout = null; }, /** * show navigation and title bars */ showbars : function () { var bars = $( '#swipebox-top-bar, #swipebox-bottom-bar' ); if ( this.docsstrans() ) { bars.addclass( 'visible-bars' ); } else { $( '#swipebox-top-bar' ).animate( { top : 0 }, 500 ); $( '#swipebox-bottom-bar' ).animate( { bottom : 0 }, 500 ); settimeout( function() { bars.addclass( 'visible-bars' ); }, 1000 ); } }, /** * hide navigation and title bars */ hidebars : function () { var bars = $( '#swipebox-top-bar, #swipebox-bottom-bar' ); if ( this.docsstrans() ) { bars.removeclass( 'visible-bars' ); } else { $( '#swipebox-top-bar' ).animate( { top : '-50px' }, 500 ); $( '#swipebox-bottom-bar' ).animate( { bottom : '-50px' }, 500 ); settimeout( function() { bars.removeclass( 'visible-bars' ); }, 1000 ); } }, /** * animate navigation and top bars */ animbars : function () { var $this = this, bars = $( '#swipebox-top-bar, #swipebox-bottom-bar' ); bars.addclass( 'visible-bars' ); $this.settimeout(); $( '#swipebox-slider' ).click( function() { if ( ! bars.hasclass( 'visible-bars' ) ) { $this.showbars(); $this.settimeout(); } } ); $( '#swipebox-bottom-bar' ).hover( function() { $this.showbars(); bars.addclass( 'visible-bars' ); $this.cleartimeout(); }, function() { if ( plugin.settings.hidebarsdelay > 0 ) { bars.removeclass( 'visible-bars' ); $this.settimeout(); } } ); }, /** * keyboard navigation */ keyboard : function () { var $this = this; $( window ).bind( 'keyup', function( event ) { event.preventdefault(); event.stoppropagation(); if ( event.keycode === 37 ) { $this.getprev(); } else if ( event.keycode === 39 ) { $this.getnext(); } else if ( event.keycode === 27 ) { $this.closeslide(); } } ); }, /** * navigation events : go to next slide, go to prevous slide and close */ actions : function () { var $this = this, action = 'touchend click'; // just detect for both event types to allow for multi-input if ( elements.length < 2 ) { $( '#swipebox-bottom-bar' ).hide(); if ( undefined === elements[ 1 ] ) { $( '#swipebox-top-bar' ).hide(); } } else { $( '#swipebox-prev' ).bind( action, function( event ) { event.preventdefault(); event.stoppropagation(); $this.getprev(); $this.settimeout(); } ); $( '#swipebox-next' ).bind( action, function( event ) { event.preventdefault(); event.stoppropagation(); $this.getnext(); $this.settimeout(); } ); } $( '#swipebox-close' ).bind( action, function() { $this.closeslide(); } ); }, /** * set current slide */ setslide : function ( index, isfirst ) { isfirst = isfirst || false; var slider = $( '#swipebox-slider' ); currentx = -index*100; if ( this.docsstrans() ) { slider.css( { '-webkit-transform' : 'translate3d(' + (-index*100)+'%, 0, 0)', 'transform' : 'translate3d(' + (-index*100)+'%, 0, 0)' } ); } else { slider.animate( { left : ( -index*100 )+'%' } ); } $( '#swipebox-slider .slide' ).removeclass( 'current' ); $( '#swipebox-slider .slide' ).eq( index ).addclass( 'current' ); this.settitle( index ); if ( isfirst ) { slider.fadein(); } $( '#swipebox-prev, #swipebox-next' ).removeclass( 'disabled' ); if ( index === 0 ) { $( '#swipebox-prev' ).addclass( 'disabled' ); } else if ( index === elements.length - 1 && plugin.settings.loopatend !== true ) { $( '#swipebox-next' ).addclass( 'disabled' ); } }, /** * open slide */ openslide : function ( index ) { $( 'html' ).addclass( 'swipebox-html' ); if ( istouch ) { $( 'html' ).addclass( 'swipebox-touch' ); if ( plugin.settings.hideclosebuttononmobile ) { $( 'html' ).addclass( 'swipebox-no-close-button' ); } } else { $( 'html' ).addclass( 'swipebox-no-touch' ); } $( window ).trigger( 'resize' ); // fix scroll bar visibility on desktop this.setslide( index, true ); }, /** * set a time out if the media is a video */ preloadmedia : function ( index ) { var $this = this, src = null; if ( elements[ index ] !== undefined ) { src = elements[ index ].href; } if ( ! $this.isvideo( src ) ) { settimeout( function() { $this.openmedia( index ); }, 1000); } else { $this.openmedia( index ); } }, /** * open */ openmedia : function ( index ) { var $this = this, src, slide; if ( elements[ index ] !== undefined ) { src = elements[ index ].href; } if ( index < 0 || index >= elements.length ) { return false; } slide = $( '#swipebox-slider .slide' ).eq( index ); if ( ! $this.isvideo( src ) ) { slide.addclass( 'slide-loading' ); $this.loadmedia( src, function() { slide.removeclass( 'slide-loading' ); slide.html( this ); if ( plugin.settings.aftermedia ) { plugin.settings.aftermedia( index ); } } ); } else { slide.html( $this.getvideo( src ) ); if ( plugin.settings.aftermedia ) { plugin.settings.aftermedia( index ); } } }, /** * set link title attribute as caption */ settitle : function ( index ) { var title = null; $( '#swipebox-title' ).empty(); if ( elements[ index ] !== undefined ) { title = elements[ index ].title; } if ( title ) { $( '#swipebox-top-bar' ).show(); $( '#swipebox-title' ).append( title ); } else { $( '#swipebox-top-bar' ).hide(); } }, /** * check if the url is a video */ isvideo : function ( src ) { if ( src ) { if ( src.match( /(youtube\.com|youtube-nocookie\.com)\/watch\?v=([a-za-z0-9\-_]+)/) || src.match( /vimeo\.com\/([0-9]*)/ ) || src.match( /youtu\.be\/([a-za-z0-9\-_]+)/ ) ) { return true; } if ( src.tolowercase().indexof( 'swipeboxvideo=1' ) >= 0 ) { return true; } } }, /** * parse uri querystring and: * - overrides value provided via dictionary * - rebuild it again returning a string */ parseuri : function (uri, customdata) { var a = document.createelement('a'), qs = {}; // decode the uri a.href = decodeuricomponent( uri ); // querystring to object if ( a.search ) { qs = json.parse( '{"' + a.search.tolowercase().replace('?','').replace(/&/g,'","').replace(/=/g,'":"') + '"}' ); } // extend with custom data if ( $.isplainobject( customdata ) ) { qs = $.extend( qs, customdata, plugin.settings.querystringdata ); // the dev has always the final word } // return querystring as a string return $ .map( qs, function (val, key) { if ( val && val > '' ) { return encodeuricomponent( key ) + '=' + encodeuricomponent( val ); } }) .join('&'); }, /** * get video iframe code from url */ getvideo : function( url ) { var iframe = '', youtubeurl = url.match( /((?:www\.)?youtube\.com|(?:www\.)?youtube-nocookie\.com)\/watch\?v=([a-za-z0-9\-_]+)/ ), youtubeshorturl = url.match(/(?:www\.)?youtu\.be\/([a-za-z0-9\-_]+)/), vimeourl = url.match( /(?:www\.)?vimeo\.com\/([0-9]*)/ ), qs = ''; if ( youtubeurl || youtubeshorturl) { if ( youtubeshorturl ) { youtubeurl = youtubeshorturl; } qs = ui.parseuri( url, { 'autoplay' : ( plugin.settings.autoplayvideos ? '1' : '0' ), 'v' : '' }); iframe = ''; } else if ( vimeourl ) { qs = ui.parseuri( url, { 'autoplay' : ( plugin.settings.autoplayvideos ? '1' : '0' ), 'byline' : '0', 'portrait' : '0', 'color': plugin.settings.vimeocolor }); iframe = ''; } else { iframe = ''; } return '
' + iframe + '
'; }, /** * load image */ loadmedia : function ( src, callback ) { // inline content if ( src.trim().indexof('#') === 0 ) { callback.call( $('
', { 'class' : 'swipebox-inline-container' }) .append( $(src) .clone() .toggleclass( plugin.settings.toggleclassonload ) ) ); } // everything else else { if ( ! this.isvideo( src ) ) { var img = $( '' ).on( 'load', function() { callback.call( img ); } ); img.attr( 'src', src ); } } }, /** * get next slide */ getnext : function () { var $this = this, src, index = $( '#swipebox-slider .slide' ).index( $( '#swipebox-slider .slide.current' ) ); if ( index + 1 < elements.length ) { src = $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src' ); $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src', src ); index++; $this.setslide( index ); $this.preloadmedia( index+1 ); if ( plugin.settings.nextslide ) { plugin.settings.nextslide(index); } } else { if ( plugin.settings.loopatend === true ) { src = $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src' ); $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src', src ); index = 0; $this.preloadmedia( index ); $this.setslide( index ); $this.preloadmedia( index + 1 ); if ( plugin.settings.nextslide ) { plugin.settings.nextslide(index); } } else { $( '#swipebox-overlay' ).addclass( 'rightspring' ); settimeout( function() { $( '#swipebox-overlay' ).removeclass( 'rightspring' ); }, 500 ); } } }, /** * get previous slide */ getprev : function () { var index = $( '#swipebox-slider .slide' ).index( $( '#swipebox-slider .slide.current' ) ), src; if ( index > 0 ) { src = $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe').attr( 'src' ); $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src', src ); index--; this.setslide( index ); this.preloadmedia( index-1 ); if ( plugin.settings.prevslide ) { plugin.settings.prevslide(index); } } else { $( '#swipebox-overlay' ).addclass( 'leftspring' ); settimeout( function() { $( '#swipebox-overlay' ).removeclass( 'leftspring' ); }, 500 ); } }, /* jshint unused:false */ nextslide : function ( index ) { // callback for next slide }, prevslide : function ( index ) { // callback for prev slide }, /** * close */ closeslide : function () { $( 'html' ).removeclass( 'swipebox-html' ); $( 'html' ).removeclass( 'swipebox-touch' ); $( window ).trigger( 'resize' ); this.destroy(); }, /** * destroy the whole thing */ destroy : function () { $( window ).unbind( 'keyup' ); $( 'body' ).unbind( 'touchstart' ); $( 'body' ).unbind( 'touchmove' ); $( 'body' ).unbind( 'touchend' ); $( '#swipebox-slider' ).unbind(); $( '#swipebox-overlay' ).remove(); if ( ! $.isarray( elem ) ) { elem.removedata( '_swipebox' ); } if ( this.target ) { this.target.trigger( 'swipebox-destroy' ); } $.swipebox.isopen = false; if ( plugin.settings.afterclose ) { plugin.settings.afterclose(); } } }; plugin.init(); }; $.fn.swipebox = function( options ) { if ( ! $.data( this, '_swipebox' ) ) { var swipebox = new $.swipebox( this, options ); this.data( '_swipebox', swipebox ); } return this.data( '_swipebox' ); }; }( window, document, jquery ) );