// ------------------------------------------------------------------------------------------- // 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);