// ------------------------------------------------------------------------------------------- // Fullscreen Slideshow // // extends avia slideshow script with a more sophisticated preloader and fixed size for slider // ------------------------------------------------------------------------------------------- (function($) { "use strict"; $.AviaFullscreenSlider = function(options, slider) { this.$slider = $( slider ); this.$inner = this.$slider.find('.avia-slideshow-inner'); this.$innerLi = this.$inner.find('>li'); this.$caption = this.$inner.find('.avia-slide-wrap .caption_container'); this.$win = $( window ); this.isMobile = $.avia_utilities.isMobile; this.property = {}; this.scrollPos = "0"; this.transform3d= document.documentElement.className.indexOf('avia_transform3d') !== -1 ? true : false; this.ticking = false; if($.avia_utilities.supported.transition === undefined) { $.avia_utilities.supported.transition = $.avia_utilities.supports('transition'); } this._init( options ); } $.AviaFullscreenSlider.defaults = { //height of the slider in percent height: 100, //subtract elements from the height subtract: '#wpadminbar, #header, #main>.title_container' }; $.AviaFullscreenSlider.prototype = { _init: function( options ) { var _self = this; //set the default options this.options = $.extend( true, {}, $.AviaFullscreenSlider.defaults, options ); if(this.$slider.data('slide_height')) this.options.height = this.$slider.data('slide_height'); //if background attachment is set to fixed or scroll disable the parallax effect this.options.parallax_enabled = this.$slider.data('image_attachment') == "" ? true : false; //elements that get subtracted from the image height this.$subtract = $(this.options.subtract); // set the slideshow size this._setSize(); // set resizing script on window resize this.$win.on( 'debouncedresize', $.proxy( this._setSize, this) ); //parallax scroll if element if leaving viewport setTimeout(function() { if(!_self.isMobile && _self.options.parallax_enabled) //disable parallax scrolling on mobile { _self.$win.on( 'scroll', $.proxy( _self._on_scroll, _self) ); } },100); /**/ //activate the defaule slider this.$slider.aviaSlider({bg_slider:true}); }, _on_scroll: function(e) { var _self = this; if(!_self.ticking) { _self.ticking = true; window.requestAnimationFrame( $.proxy( _self._parallax_scroll, _self) ); } }, _fetch_properties: function(slide_height) { this.property.offset = this.$slider.offset().top; this.property.wh = this.$win.height(); this.property.height = slide_height || this.$slider.outerHeight(); //re-position the slider this._parallax_scroll(); }, _setSize: function( ) { if(!$.fn.avia_browser_height) { var viewport = this.$win.height(), slide_height = Math.ceil( (viewport / 100) * this.options.height ); if(this.$subtract.length && this.options.height == 100) { this.$subtract.each(function() { slide_height -= this.offsetHeight - 0.5; }); } else { slide_height -= 1; } this.$slider.height(slide_height).removeClass('av-default-height-applied'); this.$inner.css('padding',0); } this._fetch_properties(slide_height); }, _parallax_scroll: function(e) { if(this.isMobile || ! this.options.parallax_enabled) return; //disable parallax scrolling on mobile var winTop = this.$win.scrollTop(), winBottom = winTop + this.property.wh, scrollPos = "0", prop = {}, prop2 = {}; if(this.property.offset < winTop && winTop <= this.property.offset + this.property.height) { scrollPos = Math.round( (winTop - this.property.offset) * 0.3 ); } if(this.scrollPos != scrollPos) { //slide background parallax this.scrollPos = scrollPos; //currently no 3d transform, because of browser quirks //this.transform3d = false; if(this.transform3d) { prop[$.avia_utilities.supported.transition+"transform"] = "translate3d(0px,"+ scrollPos +"px,0px)"; } else { prop[$.avia_utilities.supported.transition+"transform"] = "translate(0px,"+ scrollPos +"px)"; } this.$inner.css(prop); //slider caption parallax // prop2[$.avia_utilities.supported.transition+"transform"] = "translate(0px,-"+ ( scrollPos * 1) +"px)"; /* prop2['opacity'] = Math.ceil((this.$slider.height() - (scrollPos * 2)) / 100)/ 10; prop2['opacity'] = prop2['opacity'] < 0 ? 0 : prop2['opacity']; this.$caption.css(prop2); */ } this.ticking = false; } }; $.fn.aviaFullscreenSlider = function( options ) { return this.each(function() { var active = $.data( this, 'aviaFullscreenSlider' ); if(!active) { //make sure that the function doesnt get aplied a second time $.data( this, 'aviaFullscreenSlider', 1 ); //create the preparations for fullscreen slider new $.AviaFullscreenSlider( options, this ); } }); } })(jQuery);