1(function( window, $, undefined ) { 2 3 /* 4 * smartresize: debounced resize event for jQuery 5 * 6 * latest version and complete README available on Github: 7 * https://github.com/louisremi/jquery.smartresize.js 8 * 9 * Copyright 2011 @louis_remi 10 * Licensed under the MIT license. 11 */ 12 13 var $event = $.event, resizeTimeout; 14 15 $event.special.smartresize = { 16 setup: function() { 17 $(this).bind( "resize", $event.special.smartresize.handler ); 18 }, 19 teardown: function() { 20 $(this).unbind( "resize", $event.special.smartresize.handler ); 21 }, 22 handler: function( event, execAsap ) { 23 // Save the context 24 var context = this, 25 args = arguments; 26 27 // set correct event type 28 event.type = "smartresize"; 29 30 if ( resizeTimeout ) { clearTimeout( resizeTimeout ); } 31 resizeTimeout = setTimeout(function() { 32 jQuery.event.handle.apply( context, args ); 33 }, execAsap === "execAsap"? 0 : 100 ); 34 } 35 }; 36 37 $.fn.smartresize = function( fn ) { 38 return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] ); 39 }; 40 41 $.Slideshow = function( options, element ) { 42 43 this.$el = $( element ); 44 45 /***** images ****/ 46 47 // list of image items 48 this.$list = this.$el.find('ul.ei-slider-large'); 49 // image items 50 this.$imgItems = this.$list.children('li'); 51 // total number of items 52 this.itemsCount = this.$imgItems.length; 53 // images 54 this.$images = this.$imgItems.find('img:first'); 55 56 /***** thumbs ****/ 57 58 // thumbs wrapper 59 this.$sliderthumbs = this.$el.find('ul.ei-slider-thumbs').hide(); 60 // slider elements 61 this.$sliderElems = this.$sliderthumbs.children('li'); 62 // sliding div 63 this.$sliderElem = this.$sliderthumbs.children('li.ei-slider-element'); 64 // thumbs 65 this.$thumbs = this.$sliderElems.not('.ei-slider-element'); 66 67 // initialize slideshow 68 this._init( options ); 69 70 }; 71 72 $.Slideshow.defaults = { 73 // animation types: 74 // "sides" : new slides will slide in from left / right 75 // "center": new slides will appear in the center 76 animation : 'sides', // sides || center 77 // if true the slider will automatically slide, and it will only stop if the user clicks on a thumb 78 autoplay : false, 79 // interval for the slideshow 80 slideshow_interval : 3000, 81 // speed for the sliding animation 82 speed : 800, 83 // easing for the sliding animation 84 easing : '', 85 // percentage of speed for the titles animation. Speed will be speed * titlesFactor 86 titlesFactor : 0.60, 87 // titles animation speed 88 titlespeed : 800, 89 // titles animation easing 90 titleeasing : '', 91 // maximum width for the thumbs in pixels 92 thumbMaxWidth : 150 93 }; 94 95 $.Slideshow.prototype = { 96 _init : function( options ) { 97 98 this.options = $.extend( true, {}, $.Slideshow.defaults, options ); 99 100 // set the opacity of the title elements and the image items 101 this.$imgItems.css( 'opacity', 0 ); 102 this.$imgItems.find('div.ei-title > *').css( 'opacity', 0 ); 103 104 // index of current visible slider 105 this.current = 0; 106 107 var _self = this; 108 109 // preload images 110 // add loading status 111 this.$loading = $('<div class="ei-slider-loading">Loading</div>').prependTo( _self.$el ); 112 113 $.when( this._preloadImages() ).done( function() { 114 115 // hide loading status 116 _self.$loading.hide(); 117 118 // calculate size and position for each image 119 _self._setImagesSize(); 120 121 // configure thumbs container 122 _self._initThumbs(); 123 124 // show first 125 _self.$imgItems.eq( _self.current ).css({ 126 'opacity' : 1, 127 'z-index' : 10 128 }).show().find('div.ei-title > *').css( 'opacity', 1 ); 129 130 // if autoplay is true 131 if( _self.options.autoplay ) { 132 133 _self._startSlideshow(); 134 135 } 136 137 // initialize the events 138 _self._initEvents(); 139 140 }); 141 142 }, 143 _preloadImages : function() { 144 145 // preloads all the large images 146 147 var _self = this, 148 loaded = 0; 149 150 return $.Deferred( 151 152 function(dfd) { 153 154 _self.$images.each( function( i ) { 155 156 $('<img/>').load( function() { 157 158 if( ++loaded === _self.itemsCount ) { 159 160 dfd.resolve(); 161 162 } 163 164 }).attr( 'src', $(this).attr('src') ); 165 166 });
167 168 } 169 170 ).promise(); 171 172 }, 173 _setImagesSize : function() { 174 175 // save ei-slider's width 176 this.elWidth = this.$el.width(); 177 178 var _self = this; 179 180 this.$images.each( function( i ) { 181 182 var $img = $(this); 183 imgDim = _self._getImageDim( $img.attr('src') ); 184 185 $img.css({ 186 width : imgDim.width, 187 height : imgDim.height, 188 marginLeft : imgDim.left, 189 marginTop : imgDim.top 190 }); 191 192 }); 193 194 }, 195 _getImageDim : function( src ) { 196 197 var $img = new Image(); 198 199 $img.src = src; 200 201 var c_w = this.elWidth, 202 c_h = this.$el.height(), 203 r_w = c_h / c_w, 204 205 i_w = $img.width, 206 i_h = $img.height, 207 r_i = i_h / i_w, 208 new_w, new_h, new_left, new_top; 209 210 if( r_w > r_i ) { 211 212 new_h = c_h; 213 new_w = c_h / r_i; 214 215 } 216 else { 217 218 new_h = c_w * r_i; 219 new_w = c_w; 220 221 } 222 223 return { 224 width : new_w, 225 height : new_h, 226 left : ( c_w - new_w ) / 2, 227 top : ( c_h - new_h ) / 2 228 }; 229 230 }, 231 _initThumbs : function() { 232 233 // set the max-width of the slider elements to the one set in the plugin's options 234 // also, the width of each slider element will be 100% / total number of elements 235 this.$sliderElems.css({ 236 'max-width' : this.options.thumbMaxWidth + 'px', 237 'width' : 100 / this.itemsCount + '%' 238 }); 239 240 // set the max-width of the slider and show it 241 this.$sliderthumbs.css( 'max-width', this.options.thumbMaxWidth * this.itemsCount + 'px' ).show(); 242 243 }, 244 _startSlideshow : function() { 245 246 var _self = this; 247 248 this.slideshow = setTimeout( function() { 249 250 var pos; 251 252 ( _self.current === _self.itemsCount - 1 ) ? pos = 0 : pos = _self.current + 1; 253 254 _self._slideTo( pos ); 255 256 if( _self.options.autoplay ) { 257 258 _self._startSlideshow(); 259 260 } 261 262 }, this.options.slideshow_interval); 263 264 }, 265 // shows the clicked thumb's slide 266 _slideTo : function( pos ) { 267 268 // return if clicking the same element or if currently animating 269 if( pos === this.current || this.isAnimating ) 270 return false; 271 272 this.isAnimating = true; 273 274 var $currentSlide = this.$imgItems.eq( this.current ), 275 $nextSlide = this.$imgItems.eq( pos ), 276 _self = this, 277 278 preCSS = {zIndex : 10}, 279 animCSS = {opacity : 1}; 280 281 // new slide will slide in from left or right side 282 if( this.options.animation === 'sides' ) { 283 284 preCSS.left = ( pos > this.current ) ? -1 * this.elWidth : this.elWidth; 285 animCSS.left = 0; 286 287 } 288 289 // titles animation 290 $nextSlide.find('div.ei-title > h2') 291 .css( 'margin-right', 50 + 'px' ) 292 .stop() 293 .delay( this.options.speed * this.options.titlesFactor ) 294 .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing ) 295 .end() 296 .find('div.ei-title > h3') 297 .css( 'margin-right', -50 + 'px' ) 298 .stop() 299 .delay( this.options.speed * this.options.titlesFactor ) 300 .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing ) 301 302 $.when( 303 304 // fade out current titles 305 $currentSlide.css( 'z-index' , 1 ).find('div.ei-title > *').stop().fadeOut( this.options.speed / 2, function() { 306 // reset style 307 $(this).show().css( 'opacity', 0 ); 308 }), 309 310 // animate next slide in 311 $nextSlide.css( preCSS ).stop().animate( animCSS, this.options.speed, this.options.easing ), 312 313 // "sliding div" moves to new position 314 this.$sliderElem.stop().animate({ 315 left : this.$thumbs.eq( pos ).position().left 316 }, this.options.speed ) 317 318 ).done( function() { 319 320 // reset values 321 $currentSlide.css( 'opacity' , 0 ).find('div.ei-title > *').css( 'opacity', 0 ); 322 _self.current = pos; 323 _self.isAnimating = false; 324 325 }); 326 327 }, 328 _initEvents : function() { 329 330 var _self = this; 331 332 // window resize 333 $(window).on( 'smartresize.eislideshow', function( event ) { 334 335 // resize the images 336 _self._setImagesSize(); 337 338 // reset position of thumbs sliding div 339 _self.$sliderElem.css( 'left', _self.$thumbs.eq( _self.current ).position().left ); 340 341 }); 342 343 // click the thumbs 344 this.$thumbs.on( 'click.eislideshow', function( event ) { 345 346 if( _self.options.autoplay ) { 347 348 clearTimeout( _self.slideshow ); 349 _self.options.autoplay = false; 350 351 } 352 353 var $thumb = $(this), 354 idx = $thumb.index() - 1; // exclude sliding div 355 356 _self._slideTo( idx ); 357 358 return false; 359 360 }); 361 362 } 363 }; 364 365 var logError = function( message ) { 366 367 if ( this.console ) { 368 369 console.error( message ); 370 371 } 372 373 }; 374 375 $.fn.eislideshow = function( options ) { 376 377 if ( typeof options === 'string' ) { 378 379 var args = Array.prototype.slice.call( arguments, 1 ); 380 381 this.each(function() { 382 383 var instance = $.data( this, 'eislideshow' ); 384 385 if ( !instance ) { 386 logError( "cannot call methods on eislideshow prior to initialization; " + 387 "attempted to call method '" + options + "'" ); 388 return; 389 } 390 391 if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { 392 logError( "no such method '" + options + "' for eislideshow instance" ); 393 return; 394 } 395 396 instance[ options ].apply( instance, args ); 397 398 }); 399 400 } 401 else { 402 403 this.each(function() { 404 405 var instance = $.data( this, 'eislideshow' ); 406 if ( !instance ) { 407 $.data( this, 'eislideshow', new $.Slideshow( options, this ) ); 408 } 409 410 }); 411 412 } 413 414 return this; 415 416 }; 417 418})( window, 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.