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