1// ------------------------------------------------------------------------------------------- 2// Fullscreen Slideshow 3// 4// extends avia slideshow script with a more sophisticated preloader and fixed size for slider 5// ------------------------------------------------------------------------------------------- 6 7(function($) 8{ 9 "use strict"; 10 11 $.AviaFullscreenSlider = function(options, slider) 12 { 13 this.$slider = $( slider ); 14 this.$inner = this.$slider.find('.avia-slideshow-inner'); 15 this.$innerLi = this.$inner.find('>li'); 16 this.$caption = this.$inner.find('.avia-slide-wrap .caption_container'); 17 this.$win = $( window ); 18 this.isMobile = $.avia_utilities.isMobile; 19 this.isTouchDevice = $.avia_utilities.isTouchDevice; 20 this.mobile_no_animation = $( 'body' ).hasClass( 'avia-mobile-no-animations' ); 21 this.options = {}; 22 this.property = {}; 23 this.scrollPos = "0"; 24 this.transform3d = document.documentElement.className.indexOf('avia_transform3d') !== -1 ? true : false; 25 this.ticking = false; 26 27 if( $.avia_utilities.supported.transition === undefined ) 28 { 29 $.avia_utilities.supported.transition = $.avia_utilities.supports('transition'); 30 } 31 32 this._init( options ); 33 }; 34 35 $.AviaFullscreenSlider.defaults = 36 { 37 //height of the slider in percent 38 height: 100, 39 40 //subtract elements from the height 41 subtract: '#wpadminbar, #header, #main>.title_container', 42 43 // @since 5.0 only parallax works - fixed not (chrome and firefox) due to translate 44 image_attachment: 'scroll', 45 46 // enabled parallax flag 47 parallax_enabled: true 48 }; 49 50 $.AviaFullscreenSlider.prototype = 51 { 52 _init: function( options ) 53 { 54 var _self = this, 55 slideshow_options = this.$slider.data( 'slideshow-options' ); 56 57 //set the default options 58 this.options = $.extend( true, {}, $.AviaFullscreenSlider.defaults, options ); 59 60 // since 5.0 we render data attributes in a json string 61 if( 'object' == typeof slideshow_options ) 62 { 63 this.options.height = 'undefined' != typeof slideshow_options.slide_height ? slideshow_options.slide_height : this.options.height; 64 this.options.image_attachment = 'undefined' != typeof slideshow_options.image_attachment ? slideshow_options.image_attachment : this.options.image_attachment; 65 } 66 else 67 { 68 if( this.$slider.data('slide_height') ) 69 { 70 this.options.height = this.$slider.data('slide_height'); 71 } 72 73 if( this.$slider.data('image_attachment') ) 74 { 75 this.options.image_attachment = this.$slider.data('image_attachment'); 76 } 77 } 78 79 //if background attachment is set to fixed or scroll disable the parallax effect 80 this.options.parallax_enabled = this.options.image_attachment == '' ? true : false; 81 82 //elements that get subtracted from the image height 83 this.$subtract = $( this.options.subtract ); 84 85 86 // set the slideshow size 87 this._setSize(); 88 89 // set resizing script on window resize 90 this.$win.on( 'debouncedresize', this._setSize.bind( this ) ); 91 92 //parallax scroll if element if leaving viewport 93 setTimeout( function() 94 { 95 if( _self.options.parallax_enabled ) 96 { 97 // disable parallax scrolling on mobile 98 if( ! _self.isMobile || ( _self.isMobile && ! this.mobile_no_animation ) ) 99 { 100 _self.$win.on( 'scroll', _self._on_scroll.bind( _self ) ); 101 } 102 } 103 }, 100 ); 104 105 //activate the defaule slider 106 this.$slider.aviaSlider( {bg_slider:true} ); 107 }, 108 109 _on_scroll: function(e) 110 { 111 var _self = this; 112 113 if( !_self.ticking ) 114 { 115 _self.ticking = true; 116 window.requestAnimationFrame( _self._parallaxRequest.bind( _self ) ); 117 } 118 }, 119 120 _fetch_properties: function(slide_height) 121 { 122 this.property.offset = this.$slider.offset().top; 123 this.property.wh = this.$win.height(); 124 this.property.height = slide_height || this.$slider.outerHeight(); 125 126 //re-position the slider 127 this._parallax_scroll(); 128 }, 129 130 _setSize: function( ) 131 { 132 if( ! $.fn.avia_browser_height ) 133 { 134 var viewport = this.$win.height(), 135 slide_height = Math.ceil( ( viewport / 100 ) * this.options.height ); 136 137 if( this.$subtract.length && this.options.height == 100 ) 138 { 139 this.$subtract.each( function() 140 { 141 slide_height -= this.offsetHeight - 0.5; 142 }); 143 } 144 else 145 { 146 slide_height -= 1; 147 } 148 149 this.$slider.height( slide_height ).removeClass('av-default-height-applied'); 150 this.$inner.css( 'padding', 0 ); 151 } 152 153 this._fetch_properties( slide_height ); 154 }, 155 156 _parallaxRequest: function( e ) 157 { 158 // https://stackoverflow.com/questions/47184298/why-is-it-recommend-to-nest-settimeout-in-requestanimationframe-when-scheduling 159 var _self = this; 160 setTimeout( _self._parallax_scroll.bind( _self ), 0 ); 161 }, 162 163 _parallax_scroll: function(e) 164 { 165 if( ! this.options.parallax_enabled ) 166 { 167 return; 168 } 169 170 //disable parallax scrolling on mobile 171 if( this.isMobile && this.mobile_no_animation ) 172 { 173 return; 174 } 175 176 var winTop = this.$win.scrollTop(),
177 winBottom = winTop + this.property.wh, 178 scrollPos = '0', 179 prop = {}; 180 181 if(this.property.offset < winTop && winTop <= this.property.offset + this.property.height) 182 { 183 scrollPos = Math.round( ( winTop - this.property.offset ) * 0.3 ); 184 } 185 186 if( this.scrollPos != scrollPos ) 187 { 188 //slide background parallax 189 this.scrollPos = scrollPos; 190 191 if( this.transform3d ) 192 { 193 prop[$.avia_utilities.supported.transition + "transform"] = "translate3d(0px," + scrollPos + "px,0px)"; 194 } 195 else 196 { 197 prop[$.avia_utilities.supported.transition + "transform"] = "translate(0px," + scrollPos + "px)"; 198 } 199 200 this.$inner.css(prop); 201 202 //slider caption parallax 203 204 // prop2[$.avia_utilities.supported.transition+"transform"] = "translate(0px,-"+ ( scrollPos * 1) +"px)"; 205 /* 206 prop2['opacity'] = Math.ceil((this.$slider.height() - (scrollPos * 2)) / 100)/ 10; 207 prop2['opacity'] = prop2['opacity'] < 0 ? 0 : prop2['opacity']; 208 this.$caption.css(prop2); 209 */ 210 } 211 212 this.ticking = false; 213 } 214 }; 215 216 $.fn.aviaFullscreenSlider = function( options ) 217 { 218 return this.each(function() 219 { 220 var active = $.data( this, 'aviaFullscreenSlider' ); 221 222 if( ! active ) 223 { 224 //make sure that the function doesnt get aplied a second time 225 $.data( this, 'aviaFullscreenSlider', 1 ); 226 227 //create the preparations for fullscreen slider (this is slideshow and not section avia-fullscreen-slider !!) 228 new $.AviaFullscreenSlider( options, this ); 229 } 230 }); 231 }; 232 233})(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.