1// rotatingSlideshow plugin 2(function ($) { 3 function rotatingSlideshow(options) { 4 this.options = $.extend({ 5 // defaults 6 sliderHolder: '#slider-main', 7 btnsHolder: '#slider-btns', 8 audioHolder: '#slider-sound', 9 auto: true, 10 autoSpeed: '6000' 11 }, options); 12 this._init(); 13 this._auto(); 14 this._isActive(); 15 this._click(); 16 this._resize(); 17 } 18 19 rotatingSlideshow.prototype = { 20 _init: function(){ 21 this.slider = $(this.options.sliderHolder); 22 this.btns = $(this.options.btnsHolder); 23 this.audio = $(this.options.audioHolder)[0]; 24 this.auto = this.options.auto; 25 this.autoSpeed = this.options.autoSpeed; 26 // check if overlay is loader and then enable overlay images 27 var self = this; 28 // overlay status 29 var isLoaded = this.slider.find('.spinner')[0].complete; 30 // if it's not loaded then add event listener 31 if(!isLoaded){ 32 var overlay = this.slider.find('.spinner'); 33 overlay.one('load', function() { 34 self.slider.find('.slides').show(); 35 self.slider.find('.slider-overlay').show(); 36 }); 37 // if is loaded then show appropriate div's 38 } else { 39 self.slider.find('.slides').show(); 40 self.slider.find('.slider-overlay').show(); 41 } 42 }, 43 44 _click: function(){ 45 var self = this; 46 // detect btn click 47 var slider = this.slider; 48 var btns = this.btns.find('a'); 49 btns.each(function(){ 50 var item = $(this); 51 item.on('click', function(e){ 52 if(btnClick == false){ 53 // current value of the slider in degrees 54 var currentDeg = parseInt(slider.attr('data-deg')); 55 // current position of the slider [1,2,3,4] 56 var currentPos = parseInt(slider.attr('data-position')); 57 // position of the clicked button 58 var btnPos = $(this).attr('data-position'); 59 switch(btnPos){ 60 case '1': 61 // for case [1] do nothing 62 break; 63 case '2': 64 // increase degrees for 90 65 currentDeg += 90; 66 // increase position for 1 67 currentPos += 1; 68 // call function with parameters (current degrees, current position of the slider, animation time) 69 self._update(currentDeg, currentPos, 1.5); 70 self._playSound(); 71 break; 72 case '3': 73 // increase degrees for 180 74 currentDeg += 180; 75 // increase position for 1 76 currentPos += 2; 77 // call function with parameters (current degrees, current position of the slider, animation time) 78 self._update(currentDeg, currentPos, 2); 79 self._playSound(); 80 break; 81 case '4': 82 // decrease degrees for 90 83 currentDeg -= 90; 84 // increase position for 1 85 currentPos += 3; 86 // call function with parameters (current degrees, current position of the slider, animation time) 87 self._update(currentDeg, currentPos, 1.5); 88 self._playSound(); 89 break; 90 } 91 } 92 return false; 93 }); 94 }); 95 }, 96 97 _update: function(currentDeg, currentPos, animSpeed){ 98 // set clicked state to true 99 btnClick = true; 100 var self = this; 101 var slider = this.slider; 102 // check if we reached the last slide > 4 103 var pos = currentPos; 104 // if so then deduct 4 105 if(pos > 4){ 106 pos = pos - 4; 107 } 108 // 1. remove active class from all 1920*590 images and remove actve class from overlay images 109 slider.find('.slider-overlay div').removeClass('active'); 110 //slider.find('.slides img').removeClass('active').removeAttr('style'); 111 slider.find('.slides img').removeClass('active').css('transition', ''); 112 // 2. add active class for spinner image and add active class to correct 1920*590 image 113 slider.find('.spinner').addClass('active'); 114 slider.find('.slides img[data-position="' + pos + '"]').addClass('active') 115 .css({ 116 //'transition' : 'opacity ' + (animSpeed * 1.3) + 's ease' 117 'transition' : 'opacity ' + (animSpeed * 0.5) + 's ease-in' 118 }); 119 // 3. add 250ms delay and then rotate the spinner and change background classes 120 setTimeout(function(){ 121 slider.find('.spinner').css({ 122 'transform' : 'rotate(' + currentDeg + 'deg)', 123 'transition' : 'transform ' + (animSpeed * 0.4) + 's ease' 124 }); 125 slider.find('.spinner-btn').css({ 126 'transform' : 'rotate(' + currentDeg + 'deg)', 127 'transition' : 'transform ' + (animSpeed * 0.4) + 's ease' 128 }); 129 }, 250); 130 // 4. remove active class from spinner 131 setTimeout(function(){ 132 slider.find('.spinner').removeClass('active'); 133 slider.find('.spinner-btn').removeClass('active'); 134 //slider.find('.slides img[data-position="' + pos + '"]').addClass('active'); 135 }, ((animSpeed * 0.6) * 1000)); 136 // 5. add active class to the overlay image 137 setTimeout(function(){ 138 slider.find('.slider-overlay div[data-position="' + pos + '"]').addClass('active'); 139 }, ((animSpeed * 0.4) * 1000)); 140 // update the slider position 141 slider.attr('data-position', pos); 142 // update the slider degrees
143 slider.attr('data-deg', currentDeg); 144 // play sound 145 //self.audio.load(); 146 //self.audio.play(); 147 setTimeout(function(){ 148 // enable click again 149 btnClick = false; 150 }, ((animSpeed * 0.7) * 1000)); 151 }, 152 153 _playSound: function(){ 154 var self = this; 155 // play sound 156 self.audio.load(); 157 self.audio.play(); 158 self.audio.volume = 0.07; 159 self._stop(); 160 }, 161 162 _auto: function(){ 163 if(this.auto){ 164 var self = this; 165 // set rotation interval 166 timer = setInterval(function(){ 167 self._setAutoRotation(); 168 }, self.autoSpeed); 169 } 170 }, 171 172 _setAutoRotation: function(){ 173 var self = this; 174 var slider = this.slider; 175 // current degrees value 176 var deg = parseInt(slider.attr('data-deg')); 177 // current slider position 178 var currentPos = parseInt(slider.attr('data-position')); 179 currentPos += 1; 180 // rotate for +90deg 181 deg += 90; 182 // call func 183 self._update(deg, currentPos, 1.5); 184 }, 185 186 _stop: function(){ 187 clearInterval(timer); 188 }, 189 190 _isActive: function(){ 191 var self = this; 192 // determine whether browser/tab is active 193 var hidden, visibilityState, visibilityChange; 194 195 if (typeof document.hidden !== "undefined") { 196 hidden = "hidden", visibilityChange = "visibilitychange", visibilityState = "visibilityState"; 197 } else if (typeof document.msHidden !== "undefined") { 198 hidden = "msHidden", visibilityChange = "msvisibilitychange", visibilityState = "msVisibilityState"; 199 } 200 201 var document_hidden = document[hidden]; 202 203 document.addEventListener(visibilityChange, function() { 204 if(document_hidden != document[hidden]) { 205 if(document[hidden]) { 206 // Document hidden 207 self._stop(); 208 //document.title = 'hidden'; 209 } else { 210 // Document shown 211 self._auto(); 212 //document.title = 'active'; 213 } 214 document_hidden = document[hidden]; 215 } 216 }); 217 }, 218 219 _resize: function(){ 220 var slider = this.slider; 221 // on load 222 var width = $(window).width(); 223 if((width < 1520) && (width > 940)){ 224 var left = 1520 - width; 225 slider.find('> img').css({'left': '-' + left + 'px'}); 226 slider.find('.slides img').css({'left': '-' + left + 'px'}); 227 } 228 // on resize 229 $(window).on('resize', function(){ 230 var width = $(window).width(); 231 if((width < 1520) && (width > 940)){ 232 var left = 1520 - $(window).width(); 233 slider.find('> img').css({'left': '-' + left + 'px'}); 234 slider.find('.slides img').css({'left': '-' + left + 'px'}); 235 } else { 236 slider.find('> img').css({'left': '0'}); 237 slider.find('.slides img').css({'left': '0'}); 238 } 239 }); 240 } 241 }; 242 243 // global variables 244 var timer; 245 var btnClick = false; 246 247 $.fn.rotatingSlideshow = function(options){ 248 return this.each(function() { 249 var params = $.extend({}, options, {container: this}), 250 instance = new rotatingSlideshow(params); 251 $.data(this, 'rotatingSlideshow', instance); 252 }); 253 }; 254}(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.