1/** 2 * jquery.slicebox.js v1.1.0 3 * http://www.codrops.com 4 * 5 * Licensed under the MIT license. 6 * http://www.opensource.org/licenses/mit-license.php 7 * 8 * Copyright 2012, Codrops 9 * http://www.codrops.com 10 */ 11 12;( function( $, window, undefined ) { 13 14 'use strict'; 15 16 /* 17 * debouncedresize: special jQuery event that happens once after a window resize 18 * 19 * latest version and complete README available on Github: 20 * https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js 21 * 22 * Copyright 2011 @louis_remi 23 * Licensed under the MIT license. 24 */ 25 var $event = $.event, 26 $special, 27 resizeTimeout; 28 29 $special = $event.special.debouncedresize = { 30 setup: function() { 31 $( this ).on( "resize", $special.handler ); 32 }, 33 teardown: function() { 34 $( this ).off( "resize", $special.handler ); 35 }, 36 handler: function( event, execAsap ) { 37 // Save the context 38 var context = this, 39 args = arguments, 40 dispatch = function() { 41 // set correct event type 42 event.type = "debouncedresize"; 43 $event.dispatch.apply( context, args ); 44 }; 45 46 if ( resizeTimeout ) { 47 clearTimeout( resizeTimeout ); 48 } 49 50 execAsap ? 51 dispatch() : 52 resizeTimeout = setTimeout( dispatch, $special.threshold ); 53 }, 54 threshold: 50 55 }; 56 57 // ======================= imagesLoaded Plugin =============================== 58 // https://github.com/desandro/imagesloaded 59 60 // $('#my-container').imagesLoaded(myFunction) 61 // execute a callback when all images have loaded. 62 // needed because .load() doesn't work on cached images 63 64 // callback function gets image collection as argument 65 // this is the container 66 67 // original: mit license. paul irish. 2010. 68 // contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou 69 70 // blank image data-uri bypasses webkit log warning (thx doug jones) 71 var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='; 72 73 $.fn.imagesLoaded = function( callback ) { 74 var $this = this, 75 deferred = $.isFunction($.Deferred) ? $.Deferred() : 0, 76 hasNotify = $.isFunction(deferred.notify), 77 $images = $this.find('img').add( $this.filter('img') ), 78 loaded = [], 79 proper = [], 80 broken = []; 81 82 // Register deferred callbacks 83 if ($.isPlainObject(callback)) { 84 $.each(callback, function (key, value) { 85 if (key === 'callback') { 86 callback = value; 87 } else if (deferred) { 88 deferred[key](value); 89 } 90 }); 91 } 92 93 function doneLoading() { 94 var $proper = $(proper), 95 $broken = $(broken); 96 97 if ( deferred ) { 98 if ( broken.length ) { 99 deferred.reject( $images, $proper, $broken ); 100 } else { 101 deferred.resolve( $images ); 102 } 103 } 104 105 if ( $.isFunction( callback ) ) { 106 callback.call( $this, $images, $proper, $broken ); 107 } 108 } 109 110 function imgLoaded( img, isBroken ) { 111 // don't proceed if BLANK image, or image is already loaded 112 if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) { 113 return; 114 } 115 116 // store element in loaded images array 117 loaded.push( img ); 118 119 // keep track of broken and properly loaded images 120 if ( isBroken ) { 121 broken.push( img ); 122 } else { 123 proper.push( img ); 124 } 125 126 // cache image and its state for future calls 127 $.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } ); 128 129 // trigger deferred progress method if present 130 if ( hasNotify ) { 131 deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] ); 132 } 133 134 // call doneLoading and clean listeners if all images are loaded 135 if ( $images.length === loaded.length ){ 136 setTimeout( doneLoading ); 137 $images.unbind( '.imagesLoaded' ); 138 } 139 } 140 141 // if no images, trigger immediately 142 if ( !$images.length ) { 143 doneLoading(); 144 } else { 145 $images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){ 146 // trigger imgLoaded 147 imgLoaded( event.target, event.type === 'error' ); 148 }).each( function( i, el ) { 149 var src = el.src; 150 151 // find out if this image has been already checked for status 152 // if it was, and src has not changed, call imgLoaded on it 153 var cached = $.data( el, 'imagesLoaded' ); 154 if ( cached && cached.src === src ) { 155 imgLoaded( el, cached.isBroken ); 156 return; 157 } 158 159 // if complete is true and browser supports natural sizes, try 160 // to check for image status manually
161 if ( el.complete && el.naturalWidth !== undefined ) { 162 imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 ); 163 return; 164 } 165 166 // cached images don't fire load sometimes, so we reset src, but only when 167 // dealing with IE, or image is complete (loaded) and failed manual check 168 // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f 169 if ( el.readyState || el.complete ) { 170 el.src = BLANK; 171 el.src = src; 172 } 173 }); 174 } 175 176 return deferred ? deferred.promise( $this ) : $this; 177 }; 178 179 // global 180 var $window = $( window ), 181 Modernizr = window.Modernizr; 182 183 $.Slicebox = function( options, element ) { 184 185 this.$el = $( element ); 186 this._init( options ); 187 188 }; 189 190 $.Slicebox.defaults = { 191 // (v)ertical, (h)orizontal or (r)andom 192 orientation : 'v', 193 // perspective value 194 perspective : 1200, 195 // number of slices / cuboids 196 // needs to be an odd number 15 => number > 0 (if you want the limit higher, change the _validate function). 197 cuboidsCount : 5, 198 // if true then the number of slices / cuboids is going to be random (cuboidsCount is overwitten) 199 cuboidsRandom : false, 200 // the range of possible number of cuboids if cuboidsRandom is true 201 // it is strongly recommended that you do not set a very large number :) 202 maxCuboidsCount : 5, 203 // each cuboid will move x pixels left / top (depending on orientation). The middle cuboid doesn't move. the middle cuboid's neighbors will move disperseFactor pixels 204 disperseFactor : 0, 205 // color of the hidden sides 206 colorHiddenSides : '#222', 207 // the animation will start from left to right. The left most cuboid will be the first one to rotate 208 // this is the interval between each rotation in ms 209 sequentialFactor : 150, 210 // animation speed 211 // this is the speed that takes "1" cuboid to rotate 212 speed : 600, 213 // transition easing 214 easing : 'ease', 215 // if true the slicebox will start the animation automatically 216 autoplay : false, 217 // time (ms) between each rotation, if autoplay is true 218 interval: 7000, 219 // the fallback will just fade out / fade in the items 220 // this is the time fr the fade effect
221 fallbackFadeSpeed : 300, 222 // callbacks 223 onBeforeChange : function( position ) { return false; }, 224 onAfterChange : function( position ) { return false; }, 225 onReady : function() { return false; }, 226 //reverse direction of rotation 227 reverse : false, 228 }; 229 230 $.Slicebox.prototype = { 231 232 _init : function( options ) { 233 234 // options 235 this.options = $.extend( true, {}, $.Slicebox.defaults, options ); 236 237 this._validate(); 238 239 // all the items 240 this.$items = this.$el.children( 'li' ); 241 242 // total number of items 243 this.itemsCount = this.$items.length; 244 // if there's no items return 245 if(this.itemsCount === 0 ) { 246 247 return false; 248 249 }; 250 251 // suport for css 3d transforms and css transitions 252 this.support = Modernizr.csstransitions && Modernizr.csstransforms3d; 253 254 // current image index 255 this.current = 0; 256 257 // control if the slicebox is animating 258 this.isAnimating = false; 259 260 // control if slicebox is ready (all images loaded) 261 this.isReady = false; 262 263 // preload the images 264 var self = this; 265 this.$el.imagesLoaded( function() { 266 267 // we need to hide the items except first one (current default value) 268 var $current = self.$items.eq( self.current ).css( 'display', 'block' ).addClass( 'sb-current' ); 269 270 // get real size of image 271 var i = new Image(); 272 i.src = $current.find( 'img' ).attr( 'src' ); 273 self.realWidth = i.width; 274 275 // assuming all images with same size 276 self._setSize(); 277 self._setStyle(); 278 self._initEvents(); 279 280 self.options.onReady(); 281 self.isReady = true; 282 283 if( self.options.autoplay ) { 284 285 self._startSlideshow(); 286 287 } 288 289 }); 290 291 }, 292 _validate : function( options ) { 293 294 if( this.options.cuboidsCount < 0 ){ 295 296 this.options.cuboidsCount = 1; 297 298 } 299 else if( this.options.cuboidsCount > 15 ) { 300 301 this.options.cuboidsCount = 15; 302 303 } 304 else if( this.options.cuboidsCount %2 === 0 ) { 305 306 ++this.options.cuboidsCount; 307 308 } 309 310 if( this.options.maxCuboidsCount < 0 ){ 311 312 this.options.maxCuboidsCount = 1; 313 314 } 315 else if( this.options.maxCuboidsCount > 15 ) { 316 317 this.options.maxCuboidsCount = 15; 318 319 } 320 else if( this.options.maxCuboidsCount %2 === 0 ) { 321 322 ++this.options.maxCuboidsCount; 323 324 } 325 326 if( this.options.disperseFactor < 0 ) { 327 328 this.options.disperseFactor = 0; 329 330 } 331 332 if( this.options.orientation !== 'v' && this.options.orientation !== 'h' && this.options.orientation !== 'r' ) { 333 334 this.options.orientation = 'v'; 335 336 } 337 338 }, 339 _setSize : function() { 340 341 var $visible = this.$items.eq( this.current ).find( 'img' ); 342 343 this.size = { 344 width : $visible.width(), 345 height : $visible.height() 346 }; 347 348 }, 349 _setStyle : function() { 350 351 // max-width is the real size of the images 352 this.$el.css( { 353 // 'max-width' : this.realWidth 354 } ); 355 356 }, 357 _initEvents : function() { 358 359 var self = this; 360 361 $window.on( 'debouncedresize.slicebox', function( event ) { 362 363 // assuming all images with same size 364 self._setSize(); 365 366 } ); 367 368 }, 369 _startSlideshow: function() { 370 371 var self = this; 372 373 this.slideshow = setTimeout( function() { 374 375 self._navigate( 'next' ); 376 377 if ( self.options.autoplay ) { 378 379 self._startSlideshow(); 380 381 } 382 383 }, this.options.interval ); 384 385 }, 386 _stopSlideshow: function() { 387 388 if ( this.options.autoplay ) { 389 390 clearTimeout( this.slideshow ); 391 this.isPlaying = false; 392 this.options.autoplay = false; 393 394 } 395 396 }, 397 _navigate : function( dir, pos ) { 398 399 if( this.isAnimating || !this.isReady || this.itemsCount < 2 ) { 400 401 return false; 402 403 } 404 405 this.isAnimating = true; 406 407 // current item's index 408 this.prev = this.current; 409 410 // if position is passed 411 if( pos !== undefined ) { 412 413 this.current = pos; 414 415 } 416 // if not check the boundaries 417 else if( dir === 'next' ) { 418 419 this.current = this.current < this.itemsCount - 1 ? this.current + 1 : 0; 420 421 } 422 else if( dir === 'prev' ) { 423 424 this.current = this.current > 0 ? this.current - 1 : this.itemsCount - 1; 425 426 } 427 428 // callback trigger 429 this.options.onBeforeChange( this.current ); 430 431 if( !this.support ) { 432 433 this._fade( dir ); 434 435 } 436 else { 437 438 this._layout( dir ); 439 this._rotate(); 440 441 } 442 443 }, 444 _fade : function( dir ) { 445 446 var self = this, 447 $visible = this.$items.eq( this.prev ),
448 h = $visible.find( 'img' ).height(); 449 450 this.$el.css( 'height', h ); 451 this.$items.css( 'position', 'absolute' ); 452 453 this.$items.eq( this.current ).fadeIn( this.options.fallbackFadeSpeed, function() { 454 455 $( this ).css( 'display', 'block' ).addClass( 'sb-current' ); 456 self.$el.css( 'height', 'auto' ); 457 self.$items.css( 'position', 'relative' ); 458 self.isAnimating = false; 459 460 } ); 461 self.$items.eq( self.prev ).removeClass( 'sb-current' ).fadeOut( this.options.fallbackFadeSpeed ); 462 463 }, 464 _layout : function( dir ) { 465 466 // create a structure like this and append it to the main container (this.$el): 467 // <div> wrapper with perspective 468 // <div> 469 // <div></div> front side 470 // <div></div> back side 471 // <div></div> right side 472 // <div></div> left side 473 // <div></div> top side 474 // <div></div> bottom side 475 // </div> 476 // <div>..</div> 477 // <div>..</div> 478 // <div>..</div> 479 // ... number of slices defined in options 480 // </div> 481 482 var orientation = this.options.orientation; 483 484 if( orientation === 'r' ) { 485 486 orientation = Math.floor( Math.random() * 2 ) === 0 ? 'v' : 'h'; 487 488 } 489 490 if( this.options.cuboidsRandom ) { 491 492 this.options.cuboidsCount = Math.floor( Math.random() * this.options.maxCuboidsCount + 1 ); 493 494 } 495 496 this._validate(); 497 498 var boxStyle = { 499 'width' : this.size.width, 500 'height' : this.size.height, 501 'perspective' : this.options.perspective + 'px' 502 }, 503 config = $.extend( this.options, { 504 size : this.size, 505 items : this.$items, 506 direction : dir, 507 prev : this.prev, 508 current : this.current, 509 o : orientation 510 } ), 511 self = this; 512 513 this.$box = $('<div>').addClass( 'sb-perspective' ).css( boxStyle ).appendTo( this.$el ); 514 515 this.cuboids = []; 516 517 this.$el.css( 'overflow', 'visible' ); 518 519 for( var i = 0; i < this.options.cuboidsCount; ++i ) { 520 521 var cuboid = new $.Cuboid( config, i ); 522 523 this.$box.append( cuboid.getEl() ); 524 525 this.cuboids.push( cuboid ); 526 527 } 528 529 }, 530 _rotate : function() { 531 532 // hide current item 533 this.$items.eq( this.prev ).removeClass( 'sb-current' ).hide(); 534 535 for( var i = 0; i < this.options.cuboidsCount; ++i ) { 536 537 var cuboid = this.cuboids[ i ], 538 self = this; 539 540 cuboid.rotate( function( pos ) { 541 542 if( pos === self.options.cuboidsCount - 1 ) { 543 544 self.$el.css( 'overflow', 'hidden' ); 545 self.isAnimating = false; 546 self.$box.remove(); 547 var $current = self.$items.eq( self.current ); 548 $current.css( 'display', 'block' ); // show() makes it inline style 549 setTimeout(function() { 550 $current.addClass( 'sb-current' ); 551 } , 0 ); 552 self.options.onAfterChange( self.current ); 553 554 } 555 556 }); 557 558 } 559 560 }, 561 _destroy : function( callback ) { 562 563 this.$el.off( '.slicebox' ).removeData( 'slicebox' ); 564 $window.off( '.slicebox' ); 565 callback.call(); 566 567 }, 568 // public methos: adds more items to the slicebox 569 add : function( $items, callback ) { 570 571 this.$items = this.$items.add( $items ); 572 this.itemsCount = this.$items.length; 573 574 if ( callback ) { 575 576 callback.call( $items ); 577 578 } 579 580 }, 581 // public method: shows next image 582 next : function() { 583 584 this._stopSlideshow(); 585 this._navigate( 'next' ); 586 587 }, 588 // public method: shows previous image 589 previous : function() { 590 591 this._stopSlideshow(); 592 this._navigate( 'prev' ); 593 594 }, 595 // public method: goes to a specific image 596 jump : function( pos ) { 597 598 pos -= 1; 599 600 if( pos === this.current || pos >= this.itemsCount || pos < 0 ) { 601 602 return false; 603 604 } 605 606 this._stopSlideshow(); 607 this._navigate( pos > this.current ? 'next' : 'prev', pos ); 608 609 }, 610 // public method: starts the slideshow 611 // any call to next(), previous() or jump() will stop the slideshow 612 play : function() { 613 614 if( !this.isPlaying ) { 615 616 this.isPlaying = true; 617 618 this._navigate( 'next' ); 619 this.options.autoplay = true; 620 this._startSlideshow(); 621 622 } 623 624 }, 625 // publicc methos: pauses the slideshow 626 pause : function() { 627 // if( this.isPlaying ) { 628 629 this._stopSlideshow(); 630 631 //} 632 633 }, 634 // public method: check if isAnimating is true 635 isActive : function() { 636 637 return this.isAnimating; 638 639 },
640 // publicc methos: destroys the slicebox instance 641 destroy : function( callback ) { 642 643 this._destroy( callback ); 644 645 } 646 647 }; 648 649 $.Cuboid = function( config, pos ) { 650 651 this.config = config; 652 this.pos = pos; 653 this.side = 1; 654 this._setSize(); 655 this._configureStyles(); 656 657 }; 658 659 $.Cuboid.prototype = { 660 661 _setSize : function() { 662 663 this.size = { 664 width : this.config.o === 'v' ? Math.floor( this.config.size.width / this.config.cuboidsCount ) : this.config.size.width, 665 height : this.config.o === 'v' ? this.config.size.height : Math.floor( this.config.size.height / this.config.cuboidsCount ) 666 }; 667 // extra space to fix gaps 668 this.extra = this.config.o === 'v' ? this.config.size.width - ( this.size.width * this.config.cuboidsCount ) : this.config.size.height - ( this.size.height * this.config.cuboidsCount ); 669 670 }, 671 _configureStyles : function() { 672 673 // style for the cuboid element 674 // set z-indexes based on the cuboid's position 675 var middlepos = Math.ceil( this.config.cuboidsCount / 2 ), 676 positionStyle = this.pos < middlepos ? { 677 zIndex : ( this.pos + 1 ) * 100, 678 left : ( this.config.o === 'v' ) ? this.size.width * this.pos : 0, 679 top : ( this.config.o === 'v' ) ? 0 : this.size.height * this.pos 680 } : { 681 zIndex : (this.config.cuboidsCount - this.pos) * 100, 682 left : ( this.config.o === 'v' ) ? this.size.width * this.pos : 0, 683 top : ( this.config.o === 'v' ) ? 0 : this.size.height * this.pos 684 }; 685 686 // how much this cuboid is going to move (left or top values) 687 this.disperseFactor = this.config.disperseFactor * ( ( this.pos + 1 ) - middlepos ); 688 689 this.style = $.extend( { 690 '-webkit-transition' : '-webkit-transform ' + this.config.speed + 'ms ' + this.config.easing, 691 '-moz-transition' : '-moz-transform ' + this.config.speed + 'ms ' + this.config.easing, 692 '-o-transition' : '-o-transform ' + this.config.speed + 'ms ' + this.config.easing, 693 '-ms-transition' : '-ms-transform ' + this.config.speed + 'ms ' + this.config.easing, 694 'transition' : 'transform ' + this.config.speed + 'ms ' + this.config.easing 695 }, positionStyle, this.size ); 696 697 var rotationDirection = this.config.reverse ? '' : '-'; //default negative 698 var oppositeRotationDirection = this.config.reverse ? '-' : ''; //default positive 699 700 this.animationStyles = { 701 side1 : ( this.config.o === 'v' ) ? { 'transform' : 'translate3d( 0, 0, -' + ( this.size.height / 2 ) + 'px )' } : { 'transform' : 'translate3d( 0, 0, -' + ( this.size.width / 2 ) + 'px )' }, 702 side2 : ( this.config.o === 'v' ) ? { 'transform' : 'translate3d( 0, 0, -' + ( this.size.height / 2 ) + 'px ) rotate3d( 1, 0, 0, ' + rotationDirection + '90deg )' } : { 'transform' : 'translate3d( 0, 0, -' + ( this.size.width / 2 ) + 'px ) rotate3d( 0, 1, 0, ' + rotationDirection + '90deg )' }, 703 side3 : ( this.config.o === 'v' ) ? { 'transform' : 'translate3d( 0, 0, -' + ( this.size.height / 2 ) + 'px ) rotate3d( 1, 0, 0, ' + rotationDirection + '180deg )' } : { 'transform' : 'translate3d( 0, 0, -' + ( this.size.width / 2 ) + 'px ) rotate3d( 0, 1, 0, ' + rotationDirection + '180deg )' }, 704 side4 : ( this.config.o === 'v' ) ? { 'transform' : 'translate3d( 0, 0, -' + ( this.size.height / 2 ) + 'px ) rotate3d( 1, 0, 0, ' + rotationDirection + '270deg )' } : { 'transform' : 'translate3d( 0, 0, -' + ( this.size.width / 2 ) + 'px ) rotate3d( 0, 1, 0, ' + rotationDirection + '270deg )' } 705 }; 706 707 var measure = ( this.config.o === 'v' ) ? this.size.height : this.size.width; 708 709 this.sidesStyles = { 710 frontSideStyle : { 711 width : ( this.config.o === 'v' ) ? this.size.width + this.extra : this.size.width, 712 height : ( this.config.o === 'v' ) ? this.size.height : this.size.height + this.extra, 713 backgroundColor : this.config.colorHiddenSides, 714 transform : 'rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, ' + ( measure / 2 ) + 'px )' 715 }, 716 backSideStyle : { 717 width : this.size.width, 718 height : this.size.height, 719 backgroundColor : this.config.colorHiddenSides, 720 transform : 'rotate3d( 0, 1, 0, ' + oppositeRotationDirection + '180deg ) translate3d( 0, 0, ' + ( measure / 2 ) + 'px ) rotateZ( ' + oppositeRotationDirection + '180deg )' 721 }, 722 rightSideStyle : { 723 width : measure, 724 height : ( this.config.o === 'v' ) ? this.size.height : this.size.height + this.extra, 725 left : ( this.config.o === 'v' ) ? this.size.width / 2 - this.size.height / 2 : 0, 726 backgroundColor : this.config.colorHiddenSides, 727 transform : 'rotate3d( 0, 1, 0, ' + oppositeRotationDirection + '90deg ) translate3d( 0, 0, ' + ( this.size.width / 2 ) + 'px )' 728 }, 729 leftSideStyle : { 730 width : measure, 731 height : ( this.config.o === 'v' ) ? this.size.height : this.size.height + this.extra, 732 left : ( this.config.o === 'v' ) ? this.size.width / 2 - this.size.height / 2 : 0, 733 backgroundColor : this.config.colorHiddenSides, 734 transform : 'rotate3d( 0, 1, 0, ' + rotationDirection + '90deg ) translate3d( 0, 0, ' + ( this.size.width / 2 ) + 'px )' 735 }, 736 topSideStyle : { 737 width : ( this.config.o === 'v' ) ? this.size.width + this.extra
737: this.size.width, 738 height : measure, 739 top : ( this.config.o === 'v' ) ? 0 : this.size.height / 2 - this.size.width / 2, 740 backgroundColor : this.config.colorHiddenSides, 741 transform : 'rotate3d( 1, 0, 0, ' + oppositeRotationDirection + '90deg ) translate3d( 0, 0, ' + ( this.size.height / 2 ) + 'px )' 742 }, 743 bottomSideStyle : { 744 width : ( this.config.o === 'v' ) ? this.size.width + this.extra : this.size.width, 745 height : measure, 746 top : ( this.config.o === 'v' ) ? 0 : this.size.height / 2 - this.size.width / 2, 747 backgroundColor : this.config.colorHiddenSides, 748 transform : 'rotate3d( 1, 0, 0, ' + rotationDirection + '90deg ) translate3d( 0, 0, ' + ( this.size.height / 2 ) + 'px )' 749 } 750 }; 751 752 }, 753 getEl : function() { 754 755 this.$el = $('<div/>').css( this.style ) 756 .css( this.animationStyles.side1 ) 757 .append( $('<div/>').addClass('sb-side').css( this.sidesStyles.frontSideStyle ) ) 758 .append( $('<div/>').addClass('sb-side').css( this.sidesStyles.backSideStyle ) ) 759 .append( $('<div/>').addClass('sb-side').css( this.sidesStyles.rightSideStyle ) ) 760 .append( $('<div/>').addClass('sb-side').css( this.sidesStyles.leftSideStyle ) ) 761 .append( $('<div/>').addClass('sb-side').css( this.sidesStyles.topSideStyle ) ) 762 .append( $('<div/>').addClass('sb-side').css( this.sidesStyles.bottomSideStyle ) ); 763 764 this._showImage( this.config.prev ); 765 766 return this.$el; 767 768 }, 769 _showImage : function( imgPos ) { 770 771 var sideIdx, 772 $item = this.config.items.eq( imgPos ), 773 imgParam = { 774 'background-size' : this.config.size.width + 'px ' + this.config.size.height + 'px' 775 }; 776 777 imgParam.backgroundImage = 'url(' + $item.find( 'img' ).attr('src') + ')'; 778 779 switch( this.side ) { 780 781 case 1 : sideIdx = 0; break; 782 case 2 : sideIdx = ( this.config.o === 'v' ) ? 4 : 2; break; 783 case 3 : sideIdx = 1; break; 784 case 4 : sideIdx = ( this.config.o === 'v' ) ? 5 : 3; break; 785 786 }; 787 788 imgParam.backgroundPosition = ( this.config.o === 'v' ) ? - ( this.pos * this.size.width ) + 'px 0px' : '0px -' + ( this.pos * this.size.height ) + 'px'; 789 this.$el.children().eq( sideIdx ).css( imgParam ); 790 791 }, 792 rotate : function( callback ) { 793 794 var self = this, animationStyle; 795 796 setTimeout(function() { 797 798 if( self.config.direction === 'next' ) { 799 800 switch( self.side ) { 801 case 1 : animationStyle = self.animationStyles.side2; self.side = 2; break; 802 case 2 : animationStyle = self.animationStyles.side3; self.side = 3; break; 803 case 3 : animationStyle = self.animationStyles.side4; self.side = 4; break; 804 case 4 : animationStyle = self.animationStyles.side1; self.side = 1; break; 805 }; 806 807 } 808 else { 809 810 switch( self.side ) { 811 case 1 : animationStyle = self.animationStyles.side4; self.side = 4; break; 812 case 2 : animationStyle = self.animationStyles.side1; self.side = 1; break; 813 case 3 : animationStyle = self.animationStyles.side2; self.side = 2; break; 814 case 4 : animationStyle = self.animationStyles.side3; self.side = 3; break; 815 }; 816 817 } 818 819 self._showImage( self.config.current ); 820 821 var animateOut = {}, animateIn = {}; 822 823 if( self.config.o === 'v' ) { 824 825 animateOut.left = '+=' + self.disperseFactor + 'px'; 826 animateIn.left = '-=' + self.disperseFactor + 'px'; 827 828 } 829 else if( self.config.o === 'h' ) { 830 831 animateOut.top = '+=' + self.disperseFactor + 'px'; 832 animateIn.top = '-=' + self.disperseFactor + 'px'; 833 834 } 835 836 self.$el.css( animationStyle ).animate( animateOut, self.config.speed / 2 ).animate( animateIn, self.config.speed / 2 , function() { 837 838 if( callback ) { 839 840 callback.call( self, self.pos ); 841 842 } 843 844 }); 845 846 }, this.config.sequentialFactor * this.pos + 30 ); 847 848 } 849 850 }; 851 852 var logError = function( message ) { 853 854 if ( window.console ) { 855 856 window.console.error( message ); 857 858 } 859 860 }; 861 862 $.fn.slicebox = function( options ) { 863 864 var self = $.data( this, 'slicebox' ); 865 866 if ( typeof options === 'string' ) { 867 868 var args = Array.prototype.slice.call( arguments, 1 ); 869 870 this.each(function() { 871 872 if ( !self ) { 873 874 logError( "cannot call methods on slicebox prior to initialization; " + 875 "attempted to call method '" + options + "'" ); 876 return; 877 878 } 879 880 if ( !$.isFunction( self[options] ) || options.charAt(0) === "_" ) { 881 882 logError( "no such method '" + options + "' for slicebox self" ); 883 return; 884 885 } 886 887 self[ options ].apply( self, args ); 888 889 }); 890 891 } 892 else { 893 894 this.each(function() { 895 896 if ( self ) { 897 898 self._init(); 899 900 } 901 else { 902 903 self = $.data( this, 'slicebox', new $.Slicebox( options, this ) ); 904 905 } 906 907 }); 908 909 } 910 911 return self; 912 913 }; 914 915} )( jQuery, window );
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.