JAVASCRIPT   14

swipebox.js

Guest on 12th August 2021 06:45:02 PM

  1. /*! Swipebox v1.4.4 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */
  2.  
  3. // Minor modifications by Sayontan Sinha to support "data" for title
  4. // Modifications to accept "sel" and selector as a parameter. elem.selector has been deprecated by jQuery. See https://github.com/brutaldesign/swipebox/issues/383#issuecomment-742130274
  5.  
  6. ;( function ( window, document, $, undefined ) {
  7.  
  8.         $.swipebox = function(sel, elem, options ) {
  9.  
  10.                 // Default options
  11.                 var ui,
  12.                         defaults = {
  13.                                 useCSS : true,
  14.                                 useSVG : true,
  15.                                 initialIndexOnArray : 0,
  16.                                 removeBarsOnMobile : true,
  17.                                 hideCloseButtonOnMobile : false,
  18.                                 hideBarsDelay : 3000,
  19.                                 videoMaxWidth : 1140,
  20.                                 vimeoColor : 'cccccc',
  21.                                 beforeOpen: null,
  22.                                 afterOpen: null,
  23.                                 afterClose: null,
  24.                                 afterMedia: null,
  25.                                 nextSlide: null,
  26.                                 prevSlide: null,
  27.                                 loopAtEnd: false,
  28.                                 autoplayVideos: false,
  29.                                 queryStringData: {},
  30.                                 toggleClassOnLoad: ''
  31.                         },
  32.  
  33.                         plugin = this,
  34.                         elements = [], // slides array [ { href:'...', title:'...' }, ...],
  35.                         $elem,
  36.                         selector = sel,
  37.                         isMobile = navigator.userAgent.match( /(iPad)|(iPhone)|(iPod)|(Android)|(PlayBook)|(BB10)|(BlackBerry)|(Opera Mini)|(IEMobile)|(webOS)|(MeeGo)/i ),
  38.                         isTouch = isMobile !== null || document.createTouch !== undefined || ( 'ontouchstart' in window ) || ( 'onmsgesturechange' in window ) || navigator.msMaxTouchPoints,
  39.                         supportSVG = !! document.createElementNS && !! document.createElementNS( 'http://www.w3.org/2000/svg', 'svg').createSVGRect,
  40.                         winWidth = window.innerWidth ? window.innerWidth : $( window ).width(),
  41.                         winHeight = window.innerHeight ? window.innerHeight : $( window ).height(),
  42.                         currentX = 0,
  43.                 /* jshint multistr: true */
  44.                         html = '<div id="swipebox-overlay">\
  45.                                         <div id="swipebox-container">\
  46.                                                 <div id="swipebox-slider"></div>\
  47.                                                 <div id="swipebox-top-bar">\
  48.                                                         <div id="swipebox-title"></div>\
  49.                                                 </div>\
  50.                                                 <div id="swipebox-bottom-bar">\
  51.                                                         <div id="swipebox-arrows">\
  52.                                                                 <a id="swipebox-prev"></a>\
  53.                                                                 <a id="swipebox-next"></a>\
  54.                                                         </div>\
  55.                                                 </div>\
  56.                                                 <a id="swipebox-close"></a>\
  57.                                         </div>\
  58.                         </div>';
  59.  
  60.                 plugin.settings = {};
  61.  
  62.                 $.swipebox.close = function () {
  63.                         ui.closeSlide();
  64.                 };
  65.  
  66.                 $.swipebox.extend = function () {
  67.                         return ui;
  68.                 };
  69.  
  70.                 plugin.init = function() {
  71.  
  72.                         plugin.settings = $.extend( {}, defaults, options );
  73.  
  74.                         if ( Array.isArray( elem ) ) {
  75.  
  76.                                 elements = elem;
  77.                                 ui.target = $( window );
  78.                                 ui.init( plugin.settings.initialIndexOnArray );
  79.  
  80.                         } else {
  81.  
  82.                                 $( document ).on( 'click', selector, function( event ) {
  83.  
  84.                                         // console.log( isTouch );
  85.  
  86.                                         if ( event.target.parentNode.className === 'slide current' ) {
  87.  
  88.                                                 return false;
  89.                                         }
  90.  
  91.                                         if ( ! Array.isArray( elem ) ) {
  92.                                                 ui.destroy();
  93.                                                 $elem = $( selector );
  94.                                                 ui.actions();
  95.                                         }
  96.  
  97.                                         elements = [];
  98.                                         var index, relType, relVal;
  99.  
  100.                                         // Allow for HTML5 compliant attribute before legacy use of rel
  101.                                         if ( ! relVal ) {
  102.                                                 relType = 'data-rel';
  103.                                                 relVal = $( this ).attr( relType );
  104.                                         }
  105.  
  106.                                         if ( ! relVal ) {
  107.                                                 relType = 'rel';
  108.                                                 relVal = $( this ).attr( relType );
  109.                                         }
  110.  
  111.                                         if ( relVal && relVal !== '' && relVal !== 'nofollow' ) {
  112.                                                 $elem = $( selector ).filter( '[' + relType + '="' + relVal + '"]' );
  113.                                         } else {
  114.                                                 $elem = $( selector );
  115.                                         }
  116.  
  117.                                         $elem.each( function() {
  118.  
  119.                                                 var title = null,
  120.                                                         href = null;
  121.  
  122.                                                 // Added by Sayontan Sinha
  123.                                                 if ($( this ).data( 'title' )) {
  124.                                                         title = $( this ).data( 'title' );
  125.                                                 }
  126.                                                 //... End addition by Sayontan
  127.                                                 else if ( $( this ).attr( 'title' ) ) {
  128.                                                         title = $( this ).attr( 'title' );
  129.                                                 }
  130.  
  131.  
  132.                                                 if ( $( this ).attr( 'href' ) ) {
  133.                                                         href = $( this ).attr( 'href' );
  134.                                                 }
  135.  
  136.                                                 elements.push( {
  137.                                                         href: href,
  138.                                                         title: title
  139.                                                 } );
  140.                                         } );
  141.  
  142.                                         index = $elem.index( $( this ) );
  143.                                         event.preventDefault();
  144.                                         event.stopPropagation();
  145.                                         ui.target = $( event.target );
  146.                                         ui.event = event; // Added by Sayontan.
  147.                                         ui.init( index );
  148.                                 } );
  149.                         }
  150.                 };
  151.  
  152.                 ui = {
  153.  
  154.                         /**
  155.                          * Initiate Swipebox
  156.                          */
  157.                         init : function( index ) {
  158.                                 if ( plugin.settings.beforeOpen ) {
  159.                                         //plugin.settings.beforeOpen();
  160.                                         plugin.settings.beforeOpen(this.event); // Changed by Sayontan
  161.                                 }
  162.                                 this.target.trigger( 'swipebox-start' );
  163.                                 $.swipebox.isOpen = true;
  164.                                 this.build();
  165.                                 this.openSlide( index );
  166.                                 this.openMedia( index );
  167.                                 this.preloadMedia( index+1 );
  168.                                 this.preloadMedia( index-1 );
  169.                                 if ( plugin.settings.afterOpen ) {
  170.                                         plugin.settings.afterOpen(index);
  171.                                 }
  172.                         },
  173.  
  174.                         /**
  175.                          * Built HTML containers and fire main functions
  176.                          */
  177.                         build : function () {
  178.                                 var $this = this, bg;
  179.  
  180.                                 $( 'body' ).append( html );
  181.  
  182.                                 if ( supportSVG && plugin.settings.useSVG === true ) {
  183.                                         bg = $( '#swipebox-close' ).css( 'background-image' );
  184.                                         bg = bg.replace( 'png', 'svg' );
  185.                                         $( '#swipebox-prev, #swipebox-next, #swipebox-close' ).css( {
  186.                                                 'background-image' : bg
  187.                                         } );
  188.                                 }
  189.  
  190.                                 if ( isMobile && plugin.settings.removeBarsOnMobile ) {
  191.                                         $( '#swipebox-bottom-bar, #swipebox-top-bar' ).remove();
  192.                                 }
  193.  
  194.                                 $.each( elements,  function() {
  195.                                         $( '#swipebox-slider' ).append( '<div class="slide"></div>' );
  196.                                 } );
  197.  
  198.                                 $this.setDim();
  199.                                 $this.actions();
  200.  
  201.                                 if ( isTouch ) {
  202.                                         $this.gesture();
  203.                                 }
  204.  
  205.                                 // Devices can have both touch and keyboard input so always allow key events
  206.                                 $this.keyboard();
  207.  
  208.                                 $this.animBars();
  209.                                 $this.resize();
  210.  
  211.                         },
  212.  
  213.                         /**
  214.                          * Set dimensions depending on windows width and height
  215.                          */
  216.                         setDim : function () {
  217.  
  218.                                 var width, height, sliderCss = {};
  219.  
  220.                                 // Reset dimensions on mobile orientation change
  221.                                 if ( 'onorientationchange' in window ) {
  222.  
  223.                                         window.addEventListener( 'orientationchange', function() {
  224.                                                 if ( window.orientation === 0 ) {
  225.                                                         width = winWidth;
  226.                                                         height = winHeight;
  227.                                                 } else if ( window.orientation === 90 || window.orientation === -90 ) {
  228.                                                         width = winHeight;
  229.                                                         height = winWidth;
  230.                                                 }
  231.                                         }, false );
  232.  
  233.  
  234.                                 } else {
  235.  
  236.                                         width = window.innerWidth ? window.innerWidth : $( window ).width();
  237.                                         height = window.innerHeight ? window.innerHeight : $( window ).height();
  238.                                 }
  239.  
  240.                                 sliderCss = {
  241.                                         width : width,
  242.                                         height : height
  243.                                 };
  244.  
  245.                                 $( '#swipebox-overlay' ).css( sliderCss );
  246.  
  247.                         },
  248.  
  249.                         /**
  250.                          * Reset dimensions on window resize envent
  251.                          */
  252.                         resize : function () {
  253.                                 var $this = this;
  254.  
  255.                                 $( window ).resize( function() {
  256.                                         $this.setDim();
  257.                                 } ).resize();
  258.                         },
  259.  
  260.                         /**
  261.                          * Check if device supports CSS transitions
  262.                          */
  263.                         supportTransition : function () {
  264.  
  265.                                 var prefixes = 'transition WebkitTransition MozTransition OTransition msTransition KhtmlTransition'.split( ' ' ),
  266.                                         i;
  267.  
  268.                                 for ( i = 0; i < prefixes.length; i++ ) {
  269.                                         if ( document.createElement( 'div' ).style[ prefixes[i] ] !== undefined ) {
  270.                                                 return prefixes[i];
  271.                                         }
  272.                                 }
  273.                                 return false;
  274.                         },
  275.  
  276.                         /**
  277.                          * Check if CSS transitions are allowed (options + devicesupport)
  278.                          */
  279.                         doCssTrans : function () {
  280.                                 if ( plugin.settings.useCSS && this.supportTransition() ) {
  281.                                         return true;
  282.                                 }
  283.                         },
  284.  
  285.                         /**
  286.                          * Touch navigation
  287.                          */
  288.                         gesture : function () {
  289.  
  290.                                 var $this = this,
  291.                                         index,
  292.                                         hDistance,
  293.                                         vDistance,
  294.                                         hDistanceLast,
  295.                                         vDistanceLast,
  296.                                         hDistancePercent,
  297.                                         vSwipe = false,
  298.                                         hSwipe = false,
  299.                                         hSwipMinDistance = 10,
  300.                                         vSwipMinDistance = 50,
  301.                                         startCoords = {},
  302.                                         endCoords = {},
  303.                                         bars = $( '#swipebox-top-bar, #swipebox-bottom-bar' ),
  304.                                         slider = $( '#swipebox-slider' );
  305.  
  306.                                 bars.addClass( 'visible-bars' );
  307.                                 $this.setTimeout();
  308.  
  309.                                 $( 'body' ).bind( 'touchstart', function( event ) {
  310.  
  311.                                         $( this ).addClass( 'touching' );
  312.                                         index = $( '#swipebox-slider .slide' ).index( $( '#swipebox-slider .slide.current' ) );
  313.                                         endCoords = event.originalEvent.targetTouches[0];
  314.                                         startCoords.pageX = event.originalEvent.targetTouches[0].pageX;
  315.                                         startCoords.pageY = event.originalEvent.targetTouches[0].pageY;
  316.  
  317.                                         $( '#swipebox-slider' ).css( {
  318.                                                 '-webkit-transform' : 'translate3d(' + currentX +'%, 0, 0)',
  319.                                                 'transform' : 'translate3d(' + currentX + '%, 0, 0)'
  320.                                         } );
  321.  
  322.                                         $( '.touching' ).bind( 'touchmove',function( event ) {
  323.                                                 event.preventDefault();
  324.                                                 event.stopPropagation();
  325.                                                 endCoords = event.originalEvent.targetTouches[0];
  326.  
  327.                                                 if ( ! hSwipe ) {
  328.                                                         vDistanceLast = vDistance;
  329.                                                         vDistance = endCoords.pageY - startCoords.pageY;
  330.                                                         if ( Math.abs( vDistance ) >= vSwipMinDistance || vSwipe ) {
  331.                                                                 var opacity = 0.75 - Math.abs(vDistance) / slider.height();
  332.  
  333.                                                                 slider.css( { 'top': vDistance + 'px' } );
  334.                                                                 slider.css( { 'opacity': opacity } );
  335.  
  336.                                                                 vSwipe = true;
  337.                                                         }
  338.                                                 }
  339.  
  340.                                                 hDistanceLast = hDistance;
  341.                                                 hDistance = endCoords.pageX - startCoords.pageX;
  342.                                                 hDistancePercent = hDistance * 100 / winWidth;
  343.  
  344.                                                 if ( ! hSwipe && ! vSwipe && Math.abs( hDistance ) >= hSwipMinDistance ) {
  345.                                                         $( '#swipebox-slider' ).css( {
  346.                                                                 '-webkit-transition' : '',
  347.                                                                 'transition' : ''
  348.                                                         } );
  349.                                                         hSwipe = true;
  350.                                                 }
  351.  
  352.                                                 if ( hSwipe ) {
  353.  
  354.                                                         // swipe left
  355.                                                         if ( 0 < hDistance ) {
  356.  
  357.                                                                 // first slide
  358.                                                                 if ( 0 === index ) {
  359.                                                                         // console.log( 'first' );
  360.                                                                         $( '#swipebox-overlay' ).addClass( 'leftSpringTouch' );
  361.                                                                 } else {
  362.                                                                         // Follow gesture
  363.                                                                         $( '#swipebox-overlay' ).removeClass( 'leftSpringTouch' ).removeClass( 'rightSpringTouch' );
  364.                                                                         $( '#swipebox-slider' ).css( {
  365.                                                                                 '-webkit-transform' : 'translate3d(' + ( currentX + hDistancePercent ) +'%, 0, 0)',
  366.                                                                                 'transform' : 'translate3d(' + ( currentX + hDistancePercent ) + '%, 0, 0)'
  367.                                                                         } );
  368.                                                                 }
  369.  
  370.                                                                 // swipe rught
  371.                                                         } else if ( 0 > hDistance ) {
  372.  
  373.                                                                 // last Slide
  374.                                                                 if ( elements.length === index +1 ) {
  375.                                                                         // console.log( 'last' );
  376.                                                                         $( '#swipebox-overlay' ).addClass( 'rightSpringTouch' );
  377.                                                                 } else {
  378.                                                                         $( '#swipebox-overlay' ).removeClass( 'leftSpringTouch' ).removeClass( 'rightSpringTouch' );
  379.                                                                         $( '#swipebox-slider' ).css( {
  380.                                                                                 '-webkit-transform' : 'translate3d(' + ( currentX + hDistancePercent ) +'%, 0, 0)',
  381.                                                                                 'transform' : 'translate3d(' + ( currentX + hDistancePercent ) + '%, 0, 0)'
  382.                                                                         } );
  383.                                                                 }
  384.  
  385.                                                         }
  386.                                                 }
  387.                                         } );
  388.  
  389.                                         return false;
  390.  
  391.                                 } ).bind( 'touchend',function( event ) {
  392.                                         event.preventDefault();
  393.                                         event.stopPropagation();
  394.  
  395.                                         $( '#swipebox-slider' ).css( {
  396.                                                 '-webkit-transition' : '-webkit-transform 0.4s ease',
  397.                                                 'transition' : 'transform 0.4s ease'
  398.                                         } );
  399.  
  400.                                         vDistance = endCoords.pageY - startCoords.pageY;
  401.                                         hDistance = endCoords.pageX - startCoords.pageX;
  402.                                         hDistancePercent = hDistance*100/winWidth;
  403.  
  404.                                         // Swipe to bottom to close
  405.                                         if ( vSwipe ) {
  406.                                                 vSwipe = false;
  407.                                                 if ( Math.abs( vDistance ) >= 2 * vSwipMinDistance && Math.abs( vDistance ) > Math.abs( vDistanceLast ) ) {
  408.                                                         var vOffset = vDistance > 0 ? slider.height() : - slider.height();
  409.                                                         slider.animate( { top: vOffset + 'px', 'opacity': 0 },
  410.                                                                 300,
  411.                                                                 function () {
  412.                                                                         $this.closeSlide();
  413.                                                                 } );
  414.                                                 } else {
  415.                                                         slider.animate( { top: 0, 'opacity': 1 }, 300 );
  416.                                                 }
  417.  
  418.                                         } else if ( hSwipe ) {
  419.  
  420.                                                 hSwipe = false;
  421.  
  422.                                                 // swipeLeft
  423.                                                 if( hDistance >= hSwipMinDistance && hDistance >= hDistanceLast) {
  424.  
  425.                                                         $this.getPrev();
  426.  
  427.                                                         // swipeRight
  428.                                                 } else if ( hDistance <= -hSwipMinDistance && hDistance <= hDistanceLast) {
  429.  
  430.                                                         $this.getNext();
  431.                                                 }
  432.  
  433.                                         } else { // Top and bottom bars have been removed on touchable devices
  434.                                                 // tap
  435.                                                 if ( ! bars.hasClass( 'visible-bars' ) ) {
  436.                                                         $this.showBars();
  437.                                                         $this.setTimeout();
  438.                                                 } else {
  439.                                                         $this.clearTimeout();
  440.                                                         $this.hideBars();
  441.                                                 }
  442.                                         }
  443.  
  444.                                         $( '#swipebox-slider' ).css( {
  445.                                                 '-webkit-transform' : 'translate3d(' + currentX + '%, 0, 0)',
  446.                                                 'transform' : 'translate3d(' + currentX + '%, 0, 0)'
  447.                                         } );
  448.  
  449.                                         $( '#swipebox-overlay' ).removeClass( 'leftSpringTouch' ).removeClass( 'rightSpringTouch' );
  450.                                         $( '.touching' ).off( 'touchmove' ).removeClass( 'touching' );
  451.  
  452.                                 } );
  453.                         },
  454.  
  455.                         /**
  456.                          * Set timer to hide the action bars
  457.                          */
  458.                         setTimeout: function () {
  459.                                 if ( plugin.settings.hideBarsDelay > 0 ) {
  460.                                         var $this = this;
  461.                                         $this.clearTimeout();
  462.                                         $this.timeout = window.setTimeout( function() {
  463.                                                         $this.hideBars();
  464.                                                 },
  465.  
  466.                                                 plugin.settings.hideBarsDelay
  467.                                         );
  468.                                 }
  469.                         },
  470.  
  471.                         /**
  472.                          * Clear timer
  473.                          */
  474.                         clearTimeout: function () {
  475.                                 window.clearTimeout( this.timeout );
  476.                                 this.timeout = null;
  477.                         },
  478.  
  479.                         /**
  480.                          * Show navigation and title bars
  481.                          */
  482.                         showBars : function () {
  483.                                 var bars = $( '#swipebox-top-bar, #swipebox-bottom-bar' );
  484.                                 if ( this.doCssTrans() ) {
  485.                                         bars.addClass( 'visible-bars' );
  486.                                 } else {
  487.                                         $( '#swipebox-top-bar' ).animate( { top : 0 }, 500 );
  488.                                         $( '#swipebox-bottom-bar' ).animate( { bottom : 0 }, 500 );
  489.                                         setTimeout( function() {
  490.                                                 bars.addClass( 'visible-bars' );
  491.                                         }, 1000 );
  492.                                 }
  493.                         },
  494.  
  495.                         /**
  496.                          * Hide navigation and title bars
  497.                          */
  498.                         hideBars : function () {
  499.                                 var bars = $( '#swipebox-top-bar, #swipebox-bottom-bar' );
  500.                                 if ( this.doCssTrans() ) {
  501.                                         bars.removeClass( 'visible-bars' );
  502.                                 } else {
  503.                                         $( '#swipebox-top-bar' ).animate( { top : '-50px' }, 500 );
  504.                                         $( '#swipebox-bottom-bar' ).animate( { bottom : '-50px' }, 500 );
  505.                                         setTimeout( function() {
  506.                                                 bars.removeClass( 'visible-bars' );
  507.                                         }, 1000 );
  508.                                 }
  509.                         },
  510.  
  511.                         /**
  512.                          * Animate navigation and top bars
  513.                          */
  514.                         animBars : function () {
  515.                                 var $this = this,
  516.                                         bars = $( '#swipebox-top-bar, #swipebox-bottom-bar' );
  517.  
  518.                                 bars.addClass( 'visible-bars' );
  519.                                 $this.setTimeout();
  520.  
  521.                                 $( '#swipebox-slider' ).click( function() {
  522.                                         if ( ! bars.hasClass( 'visible-bars' ) ) {
  523.                                                 $this.showBars();
  524.                                                 $this.setTimeout();
  525.                                         }
  526.                                 } );
  527.  
  528.                                 $( '#swipebox-bottom-bar' ).hover( function() {
  529.                                         $this.showBars();
  530.                                         bars.addClass( 'visible-bars' );
  531.                                         $this.clearTimeout();
  532.  
  533.                                 }, function() {
  534.                                         if ( plugin.settings.hideBarsDelay > 0 ) {
  535.                                                 bars.removeClass( 'visible-bars' );
  536.                                                 $this.setTimeout();
  537.                                         }
  538.  
  539.                                 } );
  540.                         },
  541.  
  542.                         /**
  543.                          * Keyboard navigation
  544.                          */
  545.                         keyboard : function () {
  546.                                 var $this = this;
  547.                                 $( window ).bind( 'keyup', function( event ) {
  548.                                         event.preventDefault();
  549.                                         event.stopPropagation();
  550.  
  551.                                         if ( event.keyCode === 37 ) {
  552.  
  553.                                                 $this.getPrev();
  554.  
  555.                                         } else if ( event.keyCode === 39 ) {
  556.  
  557.                                                 $this.getNext();
  558.  
  559.                                         } else if ( event.keyCode === 27 ) {
  560.  
  561.                                                 $this.closeSlide();
  562.                                         }
  563.                                 } );
  564.                         },
  565.  
  566.                         /**
  567.                          * Navigation events : go to next slide, go to prevous slide and close
  568.                          */
  569.                         actions : function () {
  570.                                 var $this = this,
  571.                                         action = 'touchend click'; // Just detect for both event types to allow for multi-input
  572.  
  573.                                 if ( elements.length < 2 ) {
  574.  
  575.                                         $( '#swipebox-bottom-bar' ).hide();
  576.  
  577.                                         if ( undefined === elements[ 1 ] ) {
  578.                                                 $( '#swipebox-top-bar' ).hide();
  579.                                         }
  580.  
  581.                                 } else {
  582.                                         $( '#swipebox-prev' ).bind( action, function( event ) {
  583.                                                 event.preventDefault();
  584.                                                 event.stopPropagation();
  585.                                                 $this.getPrev();
  586.                                                 $this.setTimeout();
  587.                                         } );
  588.  
  589.                                         $( '#swipebox-next' ).bind( action, function( event ) {
  590.                                                 event.preventDefault();
  591.                                                 event.stopPropagation();
  592.                                                 $this.getNext();
  593.                                                 $this.setTimeout();
  594.                                         } );
  595.                                 }
  596.  
  597.                                 $( '#swipebox-close' ).bind( action, function() {
  598.                                         $this.closeSlide();
  599.                                 } );
  600.                         },
  601.  
  602.                         /**
  603.                          * Set current slide
  604.                          */
  605.                         setSlide : function ( index, isFirst ) {
  606.  
  607.                                 isFirst = isFirst || false;
  608.  
  609.                                 var slider = $( '#swipebox-slider' );
  610.  
  611.                                 currentX = -index*100;
  612.  
  613.                                 if ( this.doCssTrans() ) {
  614.                                         slider.css( {
  615.                                                 '-webkit-transform' : 'translate3d(' + (-index*100)+'%, 0, 0)',
  616.                                                 'transform' : 'translate3d(' + (-index*100)+'%, 0, 0)'
  617.                                         } );
  618.                                 } else {
  619.                                         slider.animate( { left : ( -index*100 )+'%' } );
  620.                                 }
  621.  
  622.                                 $( '#swipebox-slider .slide' ).removeClass( 'current' );
  623.                                 $( '#swipebox-slider .slide' ).eq( index ).addClass( 'current' );
  624.                                 this.setTitle( index );
  625.  
  626.                                 if ( isFirst ) {
  627.                                         slider.fadeIn();
  628.                                 }
  629.  
  630.                                 $( '#swipebox-prev, #swipebox-next' ).removeClass( 'disabled' );
  631.  
  632.                                 if ( index === 0 ) {
  633.                                         $( '#swipebox-prev' ).addClass( 'disabled' );
  634.                                 } else if ( index === elements.length - 1 && plugin.settings.loopAtEnd !== true ) {
  635.                                         $( '#swipebox-next' ).addClass( 'disabled' );
  636.                                 }
  637.                         },
  638.  
  639.                         /**
  640.                          * Open slide
  641.                          */
  642.                         openSlide : function ( index ) {
  643.                                 $( 'html' ).addClass( 'swipebox-html' );
  644.                                 if ( isTouch ) {
  645.                                         $( 'html' ).addClass( 'swipebox-touch' );
  646.  
  647.                                         if ( plugin.settings.hideCloseButtonOnMobile ) {
  648.                                                 $( 'html' ).addClass( 'swipebox-no-close-button' );
  649.                                         }
  650.                                 } else {
  651.                                         $( 'html' ).addClass( 'swipebox-no-touch' );
  652.                                 }
  653.                                 $( window ).trigger( 'resize' ); // fix scroll bar visibility on desktop
  654.                                 this.setSlide( index, true );
  655.                         },
  656.  
  657.                         /**
  658.                          * Set a time out if the media is a video
  659.                          */
  660.                         preloadMedia : function ( index ) {
  661.                                 var $this = this,
  662.                                         src = null;
  663.  
  664.                                 if ( elements[ index ] !== undefined ) {
  665.                                         src = elements[ index ].href;
  666.                                 }
  667.  
  668.                                 if ( ! $this.isVideo( src ) ) {
  669.                                         setTimeout( function() {
  670.                                                 $this.openMedia( index );
  671.                                         }, 1000);
  672.                                 } else {
  673.                                         $this.openMedia( index );
  674.                                 }
  675.                         },
  676.  
  677.                         /**
  678.                          * Open
  679.                          */
  680.                         openMedia : function ( index ) {
  681.                                 var $this = this,
  682.                                         src,
  683.                                         slide;
  684.  
  685.                                 if ( elements[ index ] !== undefined ) {
  686.                                         src = elements[ index ].href;
  687.                                 }
  688.  
  689.                                 if ( index < 0 || index >= elements.length ) {
  690.                                         return false;
  691.                                 }
  692.  
  693.                                 slide = $( '#swipebox-slider .slide' ).eq( index );
  694.  
  695.                                 if ( ! $this.isVideo( src ) ) {
  696.                                         slide.addClass( 'slide-loading' );
  697.                                         $this.loadMedia( src, function() {
  698.                                                 slide.removeClass( 'slide-loading' );
  699.                                                 slide.html( this );
  700.  
  701.                                                 if ( plugin.settings.afterMedia ) {
  702.                                                         plugin.settings.afterMedia( index );
  703.                                                 }
  704.                                         } );
  705.                                 } else {
  706.                                         slide.html( $this.getVideo( src ) );
  707.  
  708.                                         if ( plugin.settings.afterMedia ) {
  709.                                                 plugin.settings.afterMedia( index );
  710.                                         }
  711.                                 }
  712.  
  713.                         },
  714.  
  715.                         /**
  716.                          * Set link title attribute as caption
  717.                          */
  718.                         setTitle : function ( index ) {
  719.                                 var title = null;
  720.  
  721.                                 $( '#swipebox-title' ).empty();
  722.  
  723.                                 if ( elements[ index ] !== undefined ) {
  724.                                         title = elements[ index ].title;
  725.                                 }
  726.  
  727.                                 if ( title ) {
  728.                                         $( '#swipebox-top-bar' ).show();
  729.                                         $( '#swipebox-title' ).append( title );
  730.                                 } else {
  731.                                         $( '#swipebox-top-bar' ).hide();
  732.                                 }
  733.                         },
  734.  
  735.                         /**
  736.                          * Check if the URL is a video
  737.                          */
  738.                         isVideo : function ( src ) {
  739.  
  740.                                 if ( src ) {
  741.                                         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\-_]+)/ ) ) {
  742.                                                 return true;
  743.                                         }
  744.  
  745.                                         if ( src.toLowerCase().indexOf( 'swipeboxvideo=1' ) >= 0 ) {
  746.  
  747.                                                 return true;
  748.                                         }
  749.                                 }
  750.  
  751.                         },
  752.  
  753.                         /**
  754.                          * Parse URI querystring and:
  755.                          * - overrides value provided via dictionary
  756.                          * - rebuild it again returning a string
  757.                          */
  758.                         parseUri : function (uri, customData) {
  759.                                 var a = document.createElement('a'),
  760.                                         qs = {};
  761.  
  762.                                 // Decode the URI
  763.                                 a.href = decodeURIComponent( uri );
  764.  
  765.                                 // QueryString to Object
  766.                                 if ( a.search ) {
  767.                                         qs = JSON.parse( '{"' + a.search.toLowerCase().replace('?','').replace(/&/g,'","').replace(/=/g,'":"') + '"}' );
  768.                                 }
  769.  
  770.                                 // Extend with custom data
  771.                                 if ( $.isPlainObject( customData ) ) {
  772.                                         qs = $.extend( qs, customData, plugin.settings.queryStringData ); // The dev has always the final word
  773.                                 }
  774.  
  775.                                 // Return querystring as a string
  776.                                 return $
  777.                                         .map( qs, function (val, key) {
  778.                                                 if ( val && val > '' ) {
  779.                                                         return encodeURIComponent( key ) + '=' + encodeURIComponent( val );
  780.                                                 }
  781.                                         })
  782.                                         .join('&');
  783.                         },
  784.  
  785.                         /**
  786.                          * Get video iframe code from URL
  787.                          */
  788.                         getVideo : function( url ) {
  789.                                 var iframe = '',
  790.                                         youtubeUrl = url.match( /((?:www\.)?youtube\.com|(?:www\.)?youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/ ),
  791.                                         youtubeShortUrl = url.match(/(?:www\.)?youtu\.be\/([a-zA-Z0-9\-_]+)/),
  792.                                         vimeoUrl = url.match( /(?:www\.)?vimeo\.com\/([0-9]*)/ ),
  793.                                         qs = '';
  794.                                 if ( youtubeUrl || youtubeShortUrl) {
  795.                                         if ( youtubeShortUrl ) {
  796.                                                 youtubeUrl = youtubeShortUrl;
  797.                                         }
  798.                                         qs = ui.parseUri( url, {
  799.                                                 'autoplay' : ( plugin.settings.autoplayVideos ? '1' : '0' ),
  800.                                                 'v' : ''
  801.                                         });
  802.                                         iframe = '<iframe width="560" height="315" src="//' + youtubeUrl[1] + '/embed/' + youtubeUrl[2] + '?' + qs + '" frameborder="0" allowfullscreen></iframe>';
  803.  
  804.                                 } else if ( vimeoUrl ) {
  805.                                         qs = ui.parseUri( url, {
  806.                                                 'autoplay' : ( plugin.settings.autoplayVideos ? '1' : '0' ),
  807.                                                 'byline' : '0',
  808.                                                 'portrait' : '0',
  809.                                                 'color': plugin.settings.vimeoColor
  810.                                         });
  811.                                         iframe = '<iframe width="560" height="315"  src="//player.vimeo.com/video/' + vimeoUrl[1] + '?' + qs + '" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
  812.  
  813.                                 } else {
  814.                                         iframe = '<iframe width="560" height="315" src="' + url + '" frameborder="0" allowfullscreen></iframe>';
  815.                                 }
  816.  
  817.                                 return '<div class="swipebox-video-container" style="max-width:' + plugin.settings.videoMaxWidth + 'px"><div class="swipebox-video">' + iframe + '</div></div>';
  818.                         },
  819.  
  820.                         /**
  821.                          * Load image
  822.                          */
  823.                         loadMedia : function ( src, callback ) {
  824.                                 // Inline content
  825.                                 if ( src.trim().indexOf('#') === 0 ) {
  826.                                         callback.call(
  827.                                                 $('<div>', {
  828.                                                         'class' : 'swipebox-inline-container'
  829.                                                 })
  830.                                                         .append(
  831.                                                         $(src)
  832.                                                                 .clone()
  833.                                                                 .toggleClass( plugin.settings.toggleClassOnLoad )
  834.                                                 )
  835.                                         );
  836.                                 }
  837.                                 // Everything else
  838.                                 else {
  839.                                         if ( ! this.isVideo( src ) ) {
  840.                                                 var img = $( '<img>' ).on( 'load', function() {
  841.                                                         callback.call( img );
  842.                                                 } );
  843.  
  844.                                                 img.attr( 'src', src );
  845.                                         }
  846.                                 }
  847.                         },
  848.  
  849.                         /**
  850.                          * Get next slide
  851.                          */
  852.                         getNext : function () {
  853.                                 var $this = this,
  854.                                         src,
  855.                                         index = $( '#swipebox-slider .slide' ).index( $( '#swipebox-slider .slide.current' ) );
  856.                                 if ( index + 1 < elements.length ) {
  857.  
  858.                                         src = $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src' );
  859.                                         $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src', src );
  860.                                         index++;
  861.                                         $this.setSlide( index );
  862.                                         $this.preloadMedia( index+1 );
  863.                                         if ( plugin.settings.nextSlide ) {
  864.                                                 plugin.settings.nextSlide(index);
  865.                                         }
  866.                                 } else {
  867.  
  868.                                         if ( plugin.settings.loopAtEnd === true ) {
  869.                                                 src = $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src' );
  870.                                                 $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src', src );
  871.                                                 index = 0;
  872.                                                 $this.preloadMedia( index );
  873.                                                 $this.setSlide( index );
  874.                                                 $this.preloadMedia( index + 1 );
  875.                                                 if ( plugin.settings.nextSlide ) {
  876.                                                         plugin.settings.nextSlide(index);
  877.                                                 }
  878.                                         } else {
  879.                                                 $( '#swipebox-overlay' ).addClass( 'rightSpring' );
  880.                                                 setTimeout( function() {
  881.                                                         $( '#swipebox-overlay' ).removeClass( 'rightSpring' );
  882.                                                 }, 500 );
  883.                                         }
  884.                                 }
  885.                         },
  886.  
  887.                         /**
  888.                          * Get previous slide
  889.                          */
  890.                         getPrev : function () {
  891.                                 var index = $( '#swipebox-slider .slide' ).index( $( '#swipebox-slider .slide.current' ) ),
  892.                                         src;
  893.                                 if ( index > 0 ) {
  894.                                         src = $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe').attr( 'src' );
  895.                                         $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src', src );
  896.                                         index--;
  897.                                         this.setSlide( index );
  898.                                         this.preloadMedia( index-1 );
  899.                                         if ( plugin.settings.prevSlide ) {
  900.                                                 plugin.settings.prevSlide(index);
  901.                                         }
  902.                                 } else {
  903.                                         $( '#swipebox-overlay' ).addClass( 'leftSpring' );
  904.                                         setTimeout( function() {
  905.                                                 $( '#swipebox-overlay' ).removeClass( 'leftSpring' );
  906.                                         }, 500 );
  907.                                 }
  908.                         },
  909.                         /* jshint unused:false */
  910.                         nextSlide : function ( index ) {
  911.                                 // Callback for next slide
  912.                         },
  913.  
  914.                         prevSlide : function ( index ) {
  915.                                 // Callback for prev slide
  916.                         },
  917.  
  918.                         /**
  919.                          * Close
  920.                          */
  921.                         closeSlide : function () {
  922.                                 $( 'html' ).removeClass( 'swipebox-html' );
  923.                                 $( 'html' ).removeClass( 'swipebox-touch' );
  924.                                 $( window ).trigger( 'resize' );
  925.                                 this.destroy();
  926.                         },
  927.  
  928.                         /**
  929.                          * Destroy the whole thing
  930.                          */
  931.                         destroy : function () {
  932.                                 $( window ).unbind( 'keyup' );
  933.                                 $( 'body' ).unbind( 'touchstart' );
  934.                                 $( 'body' ).unbind( 'touchmove' );
  935.                                 $( 'body' ).unbind( 'touchend' );
  936.                                 $( '#swipebox-slider' ).unbind();
  937.                                 $( '#swipebox-overlay' ).remove();
  938.  
  939.                                 if ( ! Array.isArray( elem ) ) {
  940.                                         elem.removeData( '_swipebox' );
  941.                                 }
  942.  
  943.                                 if ( this.target ) {
  944.                                         this.target.trigger( 'swipebox-destroy' );
  945.                                 }
  946.  
  947.                                 $.swipebox.isOpen = false;
  948.  
  949.                                 if ( plugin.settings.afterClose ) {
  950.                                         plugin.settings.afterClose();
  951.                                 }
  952.                         }
  953.                 };
  954.  
  955.                 plugin.init();
  956.         };
  957.  
  958.         $.fn.swipebox = function(selector, options ) {
  959.  
  960.                 if ( ! $.data( this, '_swipebox' ) ) {
  961.                         var swipebox = new $.swipebox(selector, this, options );
  962.                         this.data( '_swipebox', swipebox );
  963.                 }
  964.                 return this.data( '_swipebox' );
  965.  
  966.         };
  967.  
  968. }( window, document, jQuery ) );

Raw Paste


Login or Register to edit or fork this paste. It's free.