View file File name : main.js Content :( function ( $ ) { var jmpressOpts = { fullscreen: false, hash: { use: false }, mouse: { clickSelects: false }, keyboard: { use: true }, animation: { transitionDuration: '1s' }, presentationMode: false, stepSelector: '.step', duration: { defaultValue: 0, }, }; /** * Presentation constructor */ function Presentation( wrapper ) { var _self, duration, new_css, ie_regex, matches; _self = this; _self.wrapper = $( wrapper ); // The wrapper for toggling fullscreen _self.slideshow = $( '.presentation', wrapper ); // Holds the slides for jmpress _self.navLeft = $( '.nav-arrow-left', wrapper ); _self.navRight = $( '.nav-arrow-right', wrapper ); _self.expandButton = $( '.nav-fullscreen-button', wrapper ); _self.overlay = $( '.autoplay-overlay', wrapper ); _self.fullscreen = false; _self.autoPlaying = false; _self.autoplayTime = parseFloat( _self.slideshow.attr( 'data-autoplay' ), 10 ) || 0; // The wrapper is scaled to the contents' size so that its border wraps tightly _self.wrapper.css( { width: _self.slideshow.width(), height: _self.slideshow.height(), } ); duration = _self.slideshow.attr( 'duration' ) || '1s'; jmpressOpts.animation.transitionDuration = duration; // Compensate for transition times if ( _self.autoplayTime ) { _self.autoplayTime += parseFloat( duration, 10 ) * 1000; } // Set the opacity transition duration // as it is delegated by css and not jmpress duration = 'opacity ' + duration; new_css = { width: _self.slideshow.width(), height: _self.slideshow.height(), '-webkit-transition': duration, '-moz-transition': duration, '-ms-transition': duration, '-o-transition': duration, transition: duration, }; $( '.step', _self.slideshow ).each( function ( i, step ) { $( step ).css( new_css ); } ); // Apply attribute to allow fading individual bullets here, // otherwise wp_kses will strip the attribute out $( '.step.fadebullets li', _self.slideshow ).each( function ( i, step ) { $( step ).attr( 'data-jmpress', 'fade' ); } ); // Register resizing to window when fullscreen $( window ).resize( function () { if ( _self.fullscreen ) { _self.resizePresentation(); } } ); // Register the nav bars to move the slides _self.navLeft.on( 'click', function () { _self.slideshow.jmpress( 'prev' ); _self.overlay.css( 'opacity', 0 ); return false; } ); _self.navRight.on( 'click', function () { _self.slideshow.jmpress( 'next' ); _self.overlay.css( 'opacity', 0 ); return false; } ); _self.slideshow.on( 'click', function () { _self.setAutoplay( true ); return false; } ); _self.slideshow.on( 'focusout', function () { _self.setAutoplay( false ); } ); // Register toggling fullscreen except for IE 9 or lower ie_regex = /MSIE\s(\d+)\.\d+/; matches = ie_regex.exec( navigator.userAgent ); if ( matches && parseInt( matches[ 1 ], 10 ) < 10 ) { _self.expandButton.remove(); _self.expandButton = null; } else { _self.expandButton.on( 'click', function () { _self.setFullscreen( ! _self.fullscreen ); return false; } ); } // Register ESC key to exit fullscreen $( window ).on( 'keydown', function ( event ) { if ( event.which === 27 ) { _self.setFullscreen( false ); } } ); // Start the presentation _self.slideshow.jmpress( jmpressOpts ); // Make content visible and remove error message on jmpress success if ( _self.slideshow.jmpress( 'initialized' ) ) { _self.slideshow.css( 'display', '' ); _self.overlay.css( 'display', '' ); $( '.not-supported-msg', _self.wrapper ).remove(); } // A bug in Firefox causes issues with the nav arrows appearing // on hover in presentation mode. Explicitly disabling fullscreen // on init seems to fix the issue _self.setFullscreen( false ); } $.extend( Presentation.prototype, { resizePresentation: function () { var scale, duration, settings, new_css, widthScale, heightScale; // Set the animation duration to 0 during resizing // so that there isn't an animation delay when scaling // up the slide contents settings = this.slideshow.jmpress( 'settings' ); duration = settings.animation.transitionDuration; settings.animation.transitionDuration = '0s'; this.slideshow.jmpress( 'reselect' ); scale = 1; new_css = { top: 0, left: 0, zoom: 1, }; // Expand the presentation to fill the lesser of the max width or height // This avoids content moving past the window for certain window sizes if ( this.fullscreen ) { widthScale = $( window ).width() / this.slideshow.width(); heightScale = $( window ).height() / this.slideshow.height(); scale = Math.min( widthScale, heightScale ); new_css.top = ( $( window ).height() - scale * this.slideshow.height() ) / 2; new_css.left = ( $( window ).width() - scale * this.slideshow.width() ) / 2; } // Firefox does not support the zoom property; IE does, but it does not work // well like in webkit, so we manually transform and position the slideshow if ( this.slideshow.css( '-moz-transform' ) || this.slideshow.css( '-ms-transform' ) ) { // Firefox keeps the center of the element in place and expands outward // so we must shift everything to compensate new_css.top += ( ( scale - 1 ) * this.slideshow.height() ) / 2; new_css.left += ( ( scale - 1 ) * this.slideshow.width() ) / 2; scale = 'scale(' + scale + ')'; $.extend( new_css, { '-moz-transform': scale, '-ms-transform': scale, transform: scale, } ); } else { // webkit scales everything with zoom so we need to offset the right amount // so that the content is vertically centered after scaling effects new_css.top /= scale; new_css.left /= scale; new_css.zoom = scale; } this.slideshow.css( new_css ); settings.animation.transitionDuration = duration; this.slideshow.jmpress( 'reselect' ); }, setFullscreen: function ( on ) { this.fullscreen = on; this.setAutoplay( false ); // Save the scroll positions before going into fullscreen mode if ( on ) { this.scrollVert = $( window ).scrollTop(); this.scrollHoriz = $( window ).scrollLeft(); // Chrome Bug: Force scroll to be at top // otherwise the presentation can end up offscreen $( window ).scrollTop( 0 ); $( window ).scrollLeft( 0 ); } $( 'html' ).toggleClass( 'presentation-global-fullscreen', on ); $( 'body' ).toggleClass( 'presentation-global-fullscreen', on ); this.wrapper.toggleClass( 'presentation-wrapper-fullscreen', on ); this.wrapper.parents().each( function ( i, e ) { $( e ).toggleClass( 'presentation-wrapper-fullscreen-parent', on ); } ); this.resizePresentation(); // Reset the scroll positions after exiting fullscreen mode if ( ! on ) { $( window ).scrollTop( this.scrollVert ); $( window ).scrollLeft( this.scrollHoriz ); } }, setAutoplay: function ( on ) { var _self = this, newAutoplayTime; if ( _self.autoPlaying === on ) { return; } newAutoplayTime = on && _self.autoplayTime > 0 ? _self.autoplayTime : 0; _self.slideshow.jmpress( 'settings' ).duration.defaultValue = newAutoplayTime; // Move to the next slide when activating autoplay if ( newAutoplayTime ) { _self.slideshow.jmpress( 'next' ); _self.overlay.css( 'opacity', 0 ); } else { _self.slideshow.jmpress( 'reselect' ); } _self.autoPlaying = on; }, } ); $( document ).ready( function () { $( '.presentation-wrapper' ).map( function () { new Presentation( this ); } ); } ); } )( jQuery );