1/** 2 * @preserve Flux Slider v1.4.4 3 * http://www.joelambert.co.uk/flux 4 * 5 * Copyright 2011, Joe Lambert. 6 * Free to use under the MIT license. 7 * http://www.opensource.org/licenses/mit-license.php 8 */ 9 10// Flux namespace 11window.flux = { 12 version: '1.4.4' 13}; 14 15(function($){ 16 flux.slider = function(elem, opts) { 17 // Setup the flux.browser singleton to perform feature detection 18 flux.browser.init(); 19 20 if(!flux.browser.supportsTransitions) 21 { 22 if(window.console && window.console.error) 23 console.error("Flux Slider requires a browser that supports CSS3 transitions"); 24 } 25 26 var _this = this; 27 28 this.element = $(elem); 29 30 // Make a list of all available transitions 31 this.transitions = []; 32 for(var fx in flux.transitions) 33 this.transitions.push(fx); 34 35 this.options = $.extend({ 36 autoplay: true, 37 transitions: this.transitions, 38 delay: 4000, 39 pagination: true, 40 controls: false, 41 captions: false, 42 width: null, 43 height: null, 44 onTransitionEnd: null 45 }, opts); 46 47 // Set the height/width if given [EXPERIMENTAL!] 48 this.height = this.options.height ? this.options.height : null; 49 this.width = this.options.width ? this.options.width : null; 50 51 // Filter out non compatible transitions 52 var newTrans = []; 53 $(this.options.transitions).each(function(index, tran){ 54 var t = new flux.transitions[tran](this), 55 compatible = true; 56 57 if(t.options.requires3d && !flux.browser.supports3d) 58 compatible = false; 59 60 if(t.options.compatibilityCheck) 61 compatible = t.options.compatibilityCheck(); 62 63 if(compatible) 64 newTrans.push(tran); 65 }); 66 67 this.options.transitions = newTrans; 68 69 this.images = new Array(); 70 this.imageLoadedCount = 0; 71 this.currentImageIndex = 0; 72 this.nextImageIndex = 1; 73 this.playing = false; 74 75
76 this.container = $('<div class="fluxslider" style=""></div>').appendTo(this.element); 77 78 this.surface = $('<div class="surface" style="position: relative;height:100%;width:100%;"></div>').appendTo(this.container); 79 80 // Listen for click events as we may want to follow a link 81 this.container.bind('click', function(event) { 82 if($(event.target).hasClass('hasLink')) 83 window.location = $(event.target).data('href'); 84 }); 85 86 this.imageContainer = $('<div class="images loading"></div>').css({ 87 'position': 'relative', 88 'overflow': 'hidden', 89 'height': '100%' 90 }).appendTo(this.surface); 91 92 // If the height/width is already set then resize the container 93 if(this.width && this.height) 94 { 95 this.imageContainer.css({ 96 width: '100%', 97 height: '100%' 98 }); 99 } 100 101 // Create the placeholders for the current and next image 102 this.image1 = $('<div class="image1" style="height: 100%; width: 100%;background-size:100% 100%;"></div>').appendTo(this.imageContainer); 103 this.image2 = $('<div class="image2" style="height: 100%; width: 100%;background-size:100% 100%;"></div>').appendTo(this.imageContainer); 104 105 $(this.image1).add(this.image2).css({ 106 'position': 'absolute', 107 'top': '0px', 108 'left': '0px' 109 110 }); 111 112 // Get a list of the images to use 113 this.element.find('img, a img').each(function(index, found_img){ 114 var imgClone = found_img.cloneNode(false), 115 link = $(found_img).parent(); 116 117 // If this img is directly inside a link then save the link for later use 118 if(link.is('a')) 119 $(imgClone).data('href', link.attr('href')); 120 121 _this.images.push(imgClone); 122 123 // Remove the images from the DOM 124 $(found_img).remove(); 125 }); 126 //_this.currentImageIndex=0; 127 _this.images = [_this.images[_this.images.length-1]].concat(_this.images); 128 129 // Load the images afterwards as IE seems to load images synchronously 130 for(var i=0; i<this.images.length; i++) { 131 var image = new Image(); 132 image.onload = function() { 133 _this.imageLoadedCount++; 134 135 _this.width = _this.width ? _this.width : this.width; 136 _this.height = _this.height ? _this.height : this.height; 137 138 if(_this.imageLoadedCount >= _this.images.length) 139 { 140 _this.finishedLoading(); 141 _this.setupImages(); 142 } 143 }; 144 145 // Load the image to ensure its cached by the browser 146 image.src = this.images[i].src; 147 } 148 149 // Catch when a transition has finished 150 this.element.bind('fluxTransitionEnd', function(event, data) { 151 // If the slider is currently playing then set the timeout for the next transition 152 // if(_this.isPlaying()) 153 // _this.start(); 154 155 // Are we using a callback instead of events for notifying about transition ends? 156 if(_this.options.onTransitionEnd) { 157 event.preventDefault(); 158 _this.options.onTransitionEnd(data); 159 } 160 }); 161 162 // Should we auto start the slider? 163 if(this.options.autoplay) 164 this.start(); 165 166 // Handle swipes 167 this.element.bind('swipeLeft', function(event){ 168 _this.next(null, {direction: 'left'}); 169 }).bind('swipeRight', function(event){ 170 _this.prev(null, {direction: 'right'}); 171 }); 172 173 // Under FF7 autoplay breaks when the current tab loses focus 174 setTimeout(function(){ 175 $(window).focus(function(){ 176 if(_this.isPlaying()) 177 _this.next(); 178 }); 179 }, 100); 180 }; 181 182 flux.slider.prototype = { 183 constructor: flux.slider, 184 playing: false, 185 start: function() { 186 var _this = this; 187 this.playing = true; 188 this.interval = setInterval(function() { 189 _this.transition(); 190 }, this.options.delay); 191 }, 192 stop: function() { 193 this.playing = false; 194 clearInterval(this.interval); 195 this.interval = null; 196 }, 197 isPlaying: function() { 198 return this.playing; 199 //return this.interval != null; 200 }, 201 next: function(trans, opts) { 202 opts = opts || {}; 203 opts.direction = 'left'; 204 this.showImage(this.currentImageIndex+1, trans, opts); 205 }, 206 prev: function(trans, opts) { 207 opts = opts || {}; 208 opts.direction = 'right'; 209 this.showImage(this.currentImageIndex-1, trans, opts); 210 }, 211 showImage: function(index, trans, opts) { 212 this.setNextIndex(index); 213 214 // Temporarily stop the transition interval 215 //clearInterval(this.interval); 216 //this.interval = null; 217 218 this.setupImages(); 219 this.transition(trans, opts); 220 }, 221 finishedLoading: function() { 222 var _this = this; 223 224 this.container.css({ 225 width: '100%', 226 height: '100%' 227 }); 228 229 this.imageContainer.removeClass('loading'); 230 231 // Should we setup a pagination view? 232 if(this.options.pagination) 233 { 234 // TODO: Attach to touch events if appropriate 235 this.pagination = $('<ul class="pagination"></ul>').css({ 236 margin: '0px', 237 padding: '0px', 238 'text-align': 'center' 239 }); 240 241 this.pagination.bind('click', function(event){ 242 event.preventDefault(); 243 _this.showImage($(event.target).data('index')); 244 }); 245 246 $(this.images).each(function(index, image){ 247 var li = $('<li data-index="'+index+'">'+(index+1)+'</li>').css({ 248 display: 'inline-block', 249 'margin-left': '0.5em', 250 'cursor': 'pointer' 251 }).appendTo(_this.pagination); 252 253 if(index == 0) 254 li.css('margin-left', 0).addClass('current'); 255 }); 256 257 this.container.append(this.pagination); 258 } 259 260 // Resize 261 $(this.imageContainer).css({ 262 width: '100%', 263 height: '100%' 264 }); 265 266 $(this.image1).css({ 267 width: '100%', 268 height: '100%' 269 }); 270 271 $(this.image2).css({ 272 width: '100%', 273 height: '100%' 274 }); 275 276 this.container.css({ 277 width: '100%', 278 height: '100%' 279 }); 280 281 // Should we add prev/next controls? 282 if(this.options.controls) 283 { 284 var css = { 285 padding: '4px 10px 10px', 286 'font-size': '60px', 287 'font-family': 'arial, sans-serif', 288 'line-height': '1em', 289 'font-weight': 'bold',
290 color: '#FFF', 291 'text-decoration': 'none', 292 background: 'rgba(0,0,0,0.5)', 293 position: 'absolute', 294 'z-index': 2000 295 }; 296 297 this.nextButton = $('<a href="#">»</a>').css(css).css3({ 298 'border-radius': '4px' 299 }).appendTo(this.surface).bind('click', function(event){ 300 event.preventDefault(); 301 _this.next(); 302 }); 303 304 this.prevButton = $('<a href="#">«</a>').css(css).css3({ 305 'border-radius': '4px' 306 }).appendTo(this.surface).bind('click', function(event){ 307 event.preventDefault(); 308 _this.prev(); 309 }); 310 311 var top = (this.height - this.nextButton.height())/2; 312 this.nextButton.css({ 313 top: top+'px', 314 right: '10px' 315 }); 316 317 this.prevButton.css({ 318 top: top+'px', 319 left: '10px' 320 }); 321 } 322 323 // Should we use captions? 324 if(this.options.captions) 325 { 326 this.captionBar = $('<div class="caption"></div>').css({ 327 background: 'rgba(0,0,0,0.6)', 328 color: '#FFF', 329 'font-size': '16px', 330 'font-family': 'helvetica, arial, sans-serif', 331 'text-decoration': 'none', 332 'font-weight': 'bold', 333 padding: '1.5em 1em', 334 opacity: 0, 335 position: 'absolute', 336 'z-index': 110, 337 width: '100%', 338 bottom: 0 339 }).css3({ 340 'transition-property': 'opacity', 341 'transition-duration': '800ms', 342 'box-sizing': 'border-box' 343 }).prependTo(this.surface); 344 } 345 346 this.updateCaption(); 347 }, 348 setupImages: function() { 349 var img1 = this.getImage(this.currentImageIndex), 350 css1 = { 351 'background-image': 'url("'+img1.src+'")', 352 'z-index': 101, 353 'cursor': 'auto' 354 }; 355 356 // Does this image have an associated link? 357 if($(img1).data('href')) 358 { 359 css1.cursor = 'pointer'; 360 this.image1.addClass('hasLink'); 361 this.image1.data('href', $(img1).data('href')); 362 } 363 else 364 { 365 this.image1.removeClass('hasLink'); 366 this.image1.data('href', null); 367 } 368 369 this.image1.css(css1).children().remove(); 370 371 this.image2.css({ 372 'background-image': 'url("'+this.getImage(this.nextImageIndex).src+'")', 373 'z-index': 100 374 }).show(); 375 376 if(this.options.pagination && this.pagination) 377 { 378 this.pagination.find('li.current').removeClass('current'); 379 $(this.pagination.find('li')[this.currentImageIndex]).addClass('current'); 380 } 381 }, 382 transition: function(transition, opts) { 383 // Allow a transition to be picked from ALL available transitions (not just the reduced set) 384 if(transition == undefined || !flux.transitions[transition]) 385 { 386 // Pick a transition at random from the (possibly reduced set of) transitions 387 var index = Math.floor(Math.random()*(this.options.transitions.length)); 388 transition = this.options.transitions[index]; 389 } 390 391 var tran = null; 392 393 try { 394 tran = new flux.transitions[transition](this, $.extend(this.options[transition] ? this.options[transition] : {}, opts)); 395 } 396 catch(e) { 397 // If an invalid transition has been provided then use the fallback (default is to just switch the image) 398 tran = new flux.transition(this, {fallback: true}); 399 } 400 401 tran.run(); 402 403 this.currentImageIndex = this.nextImageIndex; 404 this.setNextIndex(this.currentImageIndex+1); 405 this.updateCaption(); 406 }, 407 updateCaption: function() { 408 var str = $(this.getImage(this.currentImageIndex)).attr('title'); 409 if(this.options.captions && this.captionBar) 410 { 411 if(str !== "") 412 this.captionBar.html(str); 413 414 this.captionBar.css('opacity', str === "" ? 0 : 1); 415 } 416 }, 417 getImage: function(index) { 418 index = index % this.images.length; 419 420 return this.images[index]; 421 }, 422 setNextIndex: function(nextIndex) 423 { 424 if(nextIndex == undefined) 425 nextIndex = this.currentImageIndex+1; 426 427 this.nextImageIndex = nextIndex; 428 429 if(this.nextImageIndex > this.images.length-1) 430 this.nextImageIndex = 0; 431 432 if(this.nextImageIndex < 0) 433 this.nextImageIndex = this.images.length-1; 434 }, 435 increment: function() { 436 this.currentImageIndex++; 437 if(this.currentImageIndex > this.images.length-1) 438 this.currentImageIndex = 0; 439 } 440 }; 441})(window.jQuery || window.Zepto); 442 443/** 444 * Helper object to determine support for various CSS3 functions 445 * @author Joe Lambert 446 */ 447 448(function($) { 449 flux.browser = { 450 init: function() { 451 // Have we already been initialised? 452 if(flux.browser.supportsTransitions !== undefined) 453 return; 454 455 var div = document.createElement('div'), 456 prefixes = ['-webkit', '-moz', '-o', '-ms'], 457 domPrefixes = ['Webkit', 'Moz', 'O', 'Ms']; 458 459 // Does the current browser support CSS Transitions? 460 if(window.Modernizr && Modernizr.csstransitions !== undefined) 461 flux.browser.supportsTransitions = Modernizr.csstransitions; 462 else 463 { 464 flux.browser.supportsTransitions = this.supportsCSSProperty('Transition'); 465 } 466 467 // Does the current browser support 3D CSS Transforms? 468 if(window.Modernizr && Modernizr.csstransforms3d !== undefined) 469 flux.browser.supports3d = Modernizr.csstransforms3d; 470 else 471 { 472 // Custom detection when Modernizr isn't available 473 flux.browser.supports3d = this.supportsCSSProperty("Perspective"); 474 475 if ( flux.browser.supports3d && 'webkitPerspective' in $('body').get(0).style ) { 476 // Double check with a media query (similar to how Modernizr does this) 477 var div3D = $('<div id="csstransform3d"></div>'); 478 var mq = $('<style media="(transform-3d), ('+prefixes.join('-transform-3d),(')+'-transform-3d)">div#csstransform3d { position: absolute; left: 9px }</style>'); 479 480 $('body').append(div3D); 481 $('head').append(mq); 482 483 flux.browser.supports3d = div3D.get(0).offsetLeft == 9; 484 485 div3D.remove(); 486 mq.remove(); 487 } 488 } 489 490 }, 491 supportsCSSProperty: function(prop) { 492 var div = document.createElement('div'), 493 prefixes = ['-webkit', '-moz', '-o', '-ms'], 494 domPrefixes = ['Webkit', 'Moz', 'O', 'Ms']; 495 496 var support = false; 497 for(var i=0; i<domPrefixes.length; i++) 498 { 499 if(domPrefixes[i]+prop in div.style) 500 support = support || true; 501 } 502 503 return support; 504 }, 505 translate: function(x, y, z) { 506 x = (x != undefined) ? x : 0; 507 y = (y != undefined) ? y : 0; 508 z = (z != undefined) ? z : 0; 509 510 return 'translate' + (flux.browser.supports3d ? '3d(' : '(') + x + 'px,' + y + (flux.browser.supports3d ? 'px,' + z + 'px)' : 'px)'); 511 }, 512 513 rotateX: function(deg) { 514 return flux.browser.rotate('x', deg); 515 }, 516 517 rotateY: function(deg) { 518 return flux.browser.rotate('y', deg); 519 }, 520 521 rotateZ: function(deg) { 522 return flux.browser.rotate('z', deg); 523 }, 524 525 rotate: function(axis, deg) { 526 if(!axis in {'x':'', 'y':'', 'z':''}) 527 axis = 'z'; 528 529 deg = (deg != undefined) ? deg : 0; 530 531 if(flux.browser.supports3d) 532 return 'rotate3d('+(axis == 'x' ? '1' : '0')+', '+(axis == 'y' ? '1' : '0')+', '+(axis == 'z' ? '1' : '0')+', '+deg+'deg)'; 533 else 534 { 535 if(axis == 'z') 536 return 'rotate('+deg+'deg)'; 537 else 538 return ''; 539 } 540 } 541 }; 542 543 $(function(){ 544 // To continue to work with legacy code, ensure that flux.browser is initialised on document ready at the latest 545 flux.browser.init(); 546 }); 547})(window.jQuery || window.Zepto); 548 549(function($){ 550 /** 551 * Helper function for cross-browser CSS3 support, prepends all possible prefixes to all properties passed in 552 * @param {Object} props Ker/value pairs of CSS3 properties 553 */ 554 $.fn.css3 = function(props) { 555 var css = {}; 556 var prefixes = ['webkit', 'moz', 'ms', 'o']; 557 558 for(var prop in props) 559 { 560 // Add the vendor specific versions 561 for(var i=0; i<prefixes.length; i++) 562 css['-'+prefixes[i]+'-'+prop] = props[prop]; 563 564 // Add the actual version 565 css[prop] = props[prop]; 566 } 567 568 this.css(css); 569 return this; 570 }; 571 572 /** 573 * Helper function to bind to the correct transition end event 574 * @param {function} callback The function to call when the event fires 575 */ 576 $.fn.transitionEnd = function(callback) { 577 var _this = this; 578
579 var events = ['webkitTransitionEnd', 'transitionend', 'oTransitionEnd']; 580 581 for(var i=0; i < events.length; i++) 582 { 583 this.bind(events[i], function(event){ 584 // Automatically stop listening for the event 585 for(var j=0; j<events.length;j++) 586 $(this).unbind(events[j]); 587 588 // Perform the callback function 589 if(callback) 590 callback.call(this, event); 591 }); 592 } 593 594 return this; 595 }; 596 597 flux.transition = function(fluxslider, opts) { 598 this.options = $.extend({ 599 requires3d: false, 600 after: function() { 601 // Default callback for after the transition has completed 602 } 603 }, opts); 604 605 this.slider = fluxslider; 606 607 // We need to ensure transitions degrade gracefully if the transition is unsupported or not loaded 608 if((this.options.requires3d && !flux.browser.supports3d) || !flux.browser.supportsTransitions || this.options.fallback === true) 609 { 610 var _this = this; 611 612 this.options.after = undefined; 613 614 this.options.setup = function() { 615 //console.error("Fallback setup()"); 616 _this.fallbackSetup(); 617 }; 618 619 this.options.execute = function() { 620 //console.error("Fallback execute()"); 621 _this.fallbackExecute(); 622 }; 623 } 624 }; 625 626 flux.transition.prototype = { 627 constructor: flux.transition, 628 hasFinished: false, // This is a lock to ensure that the fluxTransitionEnd event is only fired once per tansition 629 run: function() { 630 var _this = this; 631 632 // do something 633 if(this.options.setup !== undefined) 634 this.options.setup.call(this); 635 636 // Remove the background image from the top image 637 this.slider.image1.css({ 638 'background-image': 'none' 639 }); 640 641 this.slider.imageContainer.css('overflow', this.options.requires3d ? 'visible' : 'hidden'); 642 643 // For some of the 3D effects using Zepto we need to delay the transitions for some reason 644 setTimeout(function(){ 645 if(_this.options.execute !== undefined) 646 _this.options.execute.call(_this); 647 }, 5); 648 }, 649 finished: function() { 650 if(this.hasFinished) 651 return; 652 653 this.hasFinished = true; 654 655 if(this.options.after) 656 this.options.after.call(this); 657 658 this.slider.imageContainer.css('overflow', 'hidden'); 659 660 this.slider.setupImages(); 661 662 // Trigger an event to signal the end of a transition 663 this.slider.element.trigger('fluxTransitionEnd', { 664 currentImage: this.slider.getImage(this.slider.currentImageIndex) 665 }); 666 }, 667 fallbackSetup: function() { 668 669 }, 670 fallbackExecute: function() { 671 this.finished(); 672 } 673 }; 674 675 flux.transitions = {}; 676 677 // Flux grid transition 678 679 flux.transition_grid = function(fluxslider, opts) { 680 return new flux.transition(fluxslider, $.extend({ 681 columns: 6, 682 rows: 6, 683 forceSquare: false, 684 setup: function() { 685 var imgWidth = $(this.slider.element.selector).width(), 686 imgHeight = $(this.slider.element.selector).height(); 687 688 var colWidth = Math.floor(imgWidth / this.options.columns), 689 rowHeight = Math.floor(imgHeight / this.options.rows); 690 691 if(this.options.forceSquare) 692 { 693 rowHeight = colWidth; 694 this.options.rows = Math.floor(imgHeight / rowHeight); 695 } 696 697 // Work out how much space remains with the adjusted barWidth 698 var colRemainder = imgWidth - (this.options.columns * colWidth), 699 colAddPerLoop = Math.ceil(colRemainder / this.options.columns), 700 701 rowRemainder = imgHeight - (this.options.rows * rowHeight), 702 rowAddPerLoop = Math.ceil(rowRemainder / this.options.rows), 703 704 delayBetweenBars = 150, 705 height = $(this.slider.element.selector).height(), 706 totalLeft = 0, 707 totalTop = 0, 708 fragment = document.createDocumentFragment(); 709 710 for(var i=0; i<this.options.columns; i++) { 711 var thisColWidth = colWidth, 712 totalTop = 0; 713 714 if(colRemainder > 0) 715 { 716 var add = colRemainder >= colAddPerLoop ? colAddPerLoop : colRemainder; 717 thisColWidth += add; 718 colRemainder -= add; 719 } 720 721 for(var j=0; j<this.options.rows; j++) 722 { 723 var thisRowHeight = rowHeight, 724 thisRowRemainder = rowRemainder; 725 726 if(thisRowRemainder > 0) 727 { 728 var add = thisRowRemainder >= rowAddPerLoop ? rowAddPerLoop : thisRowRemainder; 729 thisRowHeight += add; 730 thisRowRemainder -= add; 731 } 732 733 var tile = $('<div class="tile tile-'+i+'-'+j+'"></div>').css({ 734 width: thisColWidth+'px', 735 height: thisRowHeight+'px', 736 position: 'absolute', 737 top: totalTop+'px', 738 left: totalLeft+'px' 739 });
740 741 this.options.renderTile.call(this, tile, i, j, thisColWidth, thisRowHeight, totalLeft, totalTop); 742 743 fragment.appendChild(tile.get(0)); 744 745 totalTop += thisRowHeight; 746 } 747 748 totalLeft += thisColWidth; 749 } 750 751 // Append the fragement to the surface 752 this.slider.image1.get(0).appendChild(fragment); 753 }, 754 execute: function() { 755 var _this = this, 756 height = $(this.slider.element.selector).height(), 757 bars = this.slider.image1.find('div.barcontainer'); 758 759 this.slider.image2.hide(); 760 761 // Get notified when the last transition has completed 762 bars.last().transitionEnd(function(event){ 763 _this.slider.image2.show(); 764 765 _this.finished(); 766 }); 767 768 bars.css3({ 769 'transform': flux.browser.rotateX(-90) + ' ' + flux.browser.translate(0, height/2, height/2) 770 }); 771 }, 772 renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) { 773 774 } 775 }, opts)); 776 }; 777})(window.jQuery || window.Zepto); 778 779(function($) { 780 flux.transitions.bars = function(fluxslider, opts) { 781 return new flux.transition_grid(fluxslider, $.extend({ 782 columns: 10, 783 rows: 1, 784 delayBetweenBars: 40, 785 renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) { 786 $(elem).css({ 787 'background-image': this.slider.image1.css('background-image'), 788 'background-position': '-'+leftOffset+'px 0px', 789 'background-size': $(this.slider.element.selector).width()+'px ' 790 + $(this.slider.element.selector).height() + 'px', 791 'background-repeat': 'no-repeat', 792 }).css3({ 793 'transition-duration': '400ms', 794 'transition-timing-function': 'ease-in', 795 'transition-property': 'all', 796 'transition-delay': (colIndex*this.options.delayBetweenBars)+'ms' 797 }); 798 }, 799 execute: function() { 800 var _this = this; 801 802 var height = this.slider.image1.height(); 803 804 var bars = this.slider.image1.find('div.tile'); 805 806 // Get notified when the last transition has completed 807 $(bars[bars.length-1]).transitionEnd(function(){ 808 _this.finished(); 809 }); 810 811 setTimeout(function(){ 812 bars.css({ 813 'opacity': '0.5' 814 }).css3({ 815 'transform': flux.browser.translate(0, height) 816 }); 817 }, 50); 818 819 } 820 }, opts)); 821 }; 822})(window.jQuery || window.Zepto); 823 824(function($) { 825 flux.transitions.bars3d = function(fluxslider, opts) { 826 return new flux.transition_grid(fluxslider, $.extend({ 827 requires3d: true, 828 columns: 7, 829 rows: 1, 830 delayBetweenBars: 150, 831 perspective: 1000, 832 renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) { 833 var bar = $('<div class="bar-'+colIndex+'"></div>').css({ 834 width: colWidth+'px', 835 height: '100%', 836 position: 'absolute', 837 top: '0px', 838 left: '0px', 839 'z-index': 200, 840 841 'background-image': this.slider.image1.css('background-image'), 842 'background-position': '-'+leftOffset+'px 0px', 843 'background-repeat': 'no-repeat', 844 845 'background-size': $(this.slider.element.selector).width()+'px ' 846 + $(this.slider.element.selector).height() + 'px', 847 'background-repeat': 'no-repeat', 848 849 850 851 }).css3({ 852 'backface-visibility': 'hidden' 853 }), 854 855 bar2 = $(bar.get(0).cloneNode(false)).css({ 856 'background-image': this.slider.image2.css('background-image') 857 }).css3({ 858 'transform': flux.browser.rotateX(90) + ' ' + flux.browser.translate(0, -rowHeight/2, rowHeight/2) 859 }), 860 861 left = $('<div class="side bar-'+colIndex+'"></div>').css({ 862 width: rowHeight+'px', 863 height: rowHeight+'px', 864 position: 'absolute', 865 top: '0px', 866 left: '0px', 867 background: '#222', 868 'z-index': 190 869 }).css3({ 870 'transform': flux.browser.rotateY(90) + ' ' + flux.browser.translate(rowHeight/2, 0, -rowHeight/2) + ' ' + flux.browser.rotateY(180), 871 'backface-visibility': 'hidden' 872 }), 873 874 right = $(left.get(0).cloneNode(false)).css3({ 875 'transform': flux.browser.rotateY(90) + ' ' + flux.browser.translate(rowHeight/2, 0, colWidth-rowHeight/2) 876 }); 877 878 $(elem).css({ 879 width: colWidth+'px', 880 height: '100%', 881 position: 'absolute', 882 top: '0px', 883 left: leftOffset+'px', 884 'z-index': colIndex > this.options.columns/2 ? 1000-colIndex : 1000 // Fix for Chrome to ensure that the z-index layering is correct! 885 }).css3({ 886 'transition-duration': '800ms', 887 'transition-timing-function': 'linear', 888 'transition-property': 'all', 889 'transition-delay': (colIndex*this.options.delayBetweenBars)+'ms', 890 'transform-style': 'preserve-3d' 891 }).append(bar).append(bar2).append(left).append(right); 892 }, 893 execute: function() { 894 this.slider.image1.css3({ 895 'perspective': this.options.perspective, 896 'perspective-origin': '50% 50%' 897 }).css({ 898 '-moz-transform': 'perspective('+this.options.perspective+'px)', 899 '-moz-perspective': 'none', 900 '-moz-transform-style': 'preserve-3d' 901 }); 902 903 var _this = this, 904 height = this.slider.image1.height(), 905 bars = this.slider.image1.find('div.tile'); 906 907 this.slider.image2.hide(); 908 909 // Get notified when the last transition has completed
910 bars.last().transitionEnd(function(event){ 911 _this.slider.image1.css3({ 912 'transform-style': 'flat' 913 }); 914 915 _this.slider.image2.show(); 916 917 _this.finished(); 918 }); 919 920 setTimeout(function(){ 921 bars.css3({ 922 'transform': flux.browser.rotateX(-90) + ' ' + flux.browser.translate(0, height/2, height/2) 923 }); 924 }, 50); 925 } 926 }, opts)); 927 }; 928})(window.jQuery || window.Zepto); 929 930(function($) { 931 flux.transitions.blinds = function(fluxslider, opts) { 932 return new flux.transitions.bars(fluxslider, $.extend({ 933 execute: function() { 934 var _this = this; 935 936 var height = this.slider.image1.height(); 937 938 var bars = this.slider.image1.find('div.tile'); 939 940 // Get notified when the last transition has completed 941 $(bars[bars.length-1]).transitionEnd(function(){ 942 _this.finished(); 943 }); 944 945 setTimeout(function(){ 946 bars.css({ 947 'opacity': '0.5' 948 }).css3({ 949 'transform': 'scalex(0.0001)' 950 }); 951 }, 50); 952 } 953 }, opts)); 954 } 955})(window.jQuery || window.Zepto); 956 957(function($) { 958 flux.transitions.blinds3d = function(fluxslider, opts) { 959 return new flux.transitions.tiles3d(fluxslider, $.extend({ 960 forceSquare: false, 961 rows: 1, 962 columns: 6 963 }, opts)); 964 }; 965})(window.jQuery || window.Zepto); 966 967(function($) { 968 flux.transitions.tiles3d_small = function(fluxslider, opts) { 969 return new flux.transitions.tiles3d(fluxslider, $.extend({ 970 forceSquare: false, 971 rows: 1, 972 columns: 3, 973 rows:3, 974 }, opts)); 975 }; 976})(window.jQuery || window.Zepto); 977 978(function($) { 979 flux.transitions.zip = function(fluxslider, opts) { 980 return new flux.transitions.bars(fluxslider, $.extend({ 981 execute: function() { 982 var _this = this; 983 984 var height = this.slider.image1.height(); 985 986 var bars = this.slider.image1.find('div.tile'); 987 988 // Get notified when the last transition has completed 989 $(bars[bars.length-1]).transitionEnd(function(){ 990 _this.finished(); 991 }); 992 993 setTimeout(function(){ 994 bars.each(function(index, bar){ 995 $(bar).css({ 996 'opacity': '0.3' 997 }).css3({ 998 'transform': flux.browser.translate(0, (index%2 ? '-'+(2*height) : height)) 999 }); 1000 }); 1001 }, 20); 1002 } 1003 }, opts)); 1004 }; 1005})(window.jQuery || window.Zepto); 1006 1007(function($) { 1008 flux.transitions.blocks = function(fluxslider, opts) { 1009 return new flux.transition_grid(fluxslider, $.extend({ 1010 forceSquare: true, 1011 delayBetweenBars: 100, 1012 renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) { 1013 var delay = Math.floor(Math.random()*10*this.options.delayBetweenBars); 1014 $(elem).css({ 1015 'background-image': this.slider.image1.css('background-image'), 1016 'background-position': '-'+leftOffset+'px -'+topOffset+'px', 1017 'background-size': $(this.slider.element.selector).width()+'px ' 1018 + $(this.slider.element.selector).height() + 'px', 1019 'background-repeat': 'no-repeat', 1020 1021 }).css3({ 1022 'transition-duration': '350ms', 1023 'transition-timing-function': 'ease-in', 1024 'transition-property': 'all', 1025 'transition-delay': delay+'ms' 1026 }); 1027 1028 // Keep track of the last elem to fire 1029 if(this.maxDelay === undefined) 1030 this.maxDelay = 0; 1031 1032 if(delay > this.maxDelay) 1033 { 1034 this.maxDelay = delay; 1035 this.maxDelayTile = elem; 1036 } 1037 }, 1038 execute: function() { 1039 var _this = this; 1040 1041 var blocks = this.slider.image1.find('div.tile'); 1042 1043 // Get notified when the last transition has completed 1044 this.maxDelayTile.transitionEnd(function(){ 1045 _this.finished(); 1046 }); 1047 1048 setTimeout(function(){ 1049 blocks.each(function(index, block){ 1050 $(block).css({ 1051 'opacity': '0' 1052 }).css3({ 1053 'transform': 'scale(0.8)' 1054 }); 1055 }); 1056 }, 50); 1057 } 1058 }, opts)); 1059 }; 1060})(window.jQuery || window.Zepto); 1061 1062(function($) { 1063 flux.transitions.blocks2 = function(fluxslider, opts) { 1064 return new flux.transition_grid(fluxslider, $.extend({ 1065 cols: 12, 1066 forceSquare: true, 1067 delayBetweenDiagnols: 150, 1068 renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) {
1069 var delay = Math.floor(Math.random()*10*this.options.delayBetweenBars); 1070 1071 $(elem).css({ 1072 'background-image': this.slider.image1.css('background-image'), 1073 'background-position': '-'+leftOffset+'px -'+topOffset+'px', 1074 'background-size': $(this.slider.element.selector).width()+'px ' 1075 + $(this.slider.element.selector).height() + 'px', 1076 'background-repeat': 'no-repeat', 1077 1078 }).css3({ 1079 'transition-duration': '350ms', 1080 'transition-timing-function': 'ease-in', 1081 'transition-property': 'all', 1082 'transition-delay': (colIndex+rowIndex)*this.options.delayBetweenDiagnols+'ms', 1083 'backface-visibility': 'hidden' // trigger hardware acceleration 1084 }); 1085 }, 1086 execute: function() { 1087 var _this = this; 1088 1089 var blocks = this.slider.image1.find('div.tile'); 1090 1091 // Get notified when the last transition has completed 1092 blocks.last().transitionEnd(function(){ 1093 _this.finished(); 1094 }); 1095 1096 setTimeout(function(){ 1097 blocks.each(function(index, block){ 1098 $(block).css({ 1099 'opacity': '0' 1100 }).css3({ 1101 'transform': 'scale(0.8)' 1102 }); 1103 }); 1104 }, 50); 1105 } 1106 }, opts)); 1107 }; 1108})(window.jQuery || window.Zepto); 1109 1110(function($) { 1111 flux.transitions.concentric = function(fluxslider, opts) { 1112 return new flux.transition(fluxslider, $.extend({ 1113 blockSize: 60, 1114 delay: 150, 1115 alternate: false, 1116 setup: function() { 1117 var w = this.slider.image1.width(), 1118 h = this.slider.image1.height(), 1119 largestLength = Math.sqrt(w*w + h*h), // Largest length is the diagonal 1120 1121 // How many blocks do we need? 1122 blockCount = Math.ceil(((largestLength-this.options.blockSize)/2) / this.options.blockSize) + 1, // 1 extra to account for the round border 1123 fragment = document.createDocumentFragment(); 1124 1125 for(var i=0; i<blockCount; i++) 1126 { 1127 var thisBlockSize = (2*i*this.options.blockSize)+this.options.blockSize; 1128 1129 var block = $('<div></div>').attr('class', 'block block-'+i).css({ 1130 width: thisBlockSize+'px', 1131 height: thisBlockSize+'px', 1132 position: 'absolute', 1133 top: ((h-thisBlockSize)/2)+'px', 1134 left: ((w-thisBlockSize)/2)+'px', 1135 1136 'z-index': 100+(blockCount-i), 1137 1138 'background-image': this.slider.image1.css('background-image'), 1139 'background-position': 'center center' 1140 }).css3({ 1141 'border-radius': thisBlockSize+'px', 1142 'transition-duration': '800ms', 1143 'transition-timing-function': 'linear', 1144 'transition-property': 'all', 1145 'transition-delay': ((blockCount-i)*this.options.delay)+'ms' 1146 }); 1147 1148 fragment.appendChild(block.get(0)); 1149 } 1150 1151 //this.slider.image1.append($(fragment)); 1152 this.slider.image1.get(0).appendChild(fragment); 1153 }, 1154 execute: function() { 1155 var _this = this; 1156 1157 var blocks = this.slider.image1.find('div.block'); 1158 1159 // Get notified when the last transition has completed 1160 $(blocks[0]).transitionEnd(function(){ 1161 _this.finished(); 1162 }); 1163 1164 setTimeout(function(){ 1165 blocks.each(function(index, block){ 1166 $(block).css({ 1167 'opacity': '0' 1168 }).css3({ 1169 'transform': flux.browser.rotateZ((!_this.options.alternate || index%2 ? '' : '-')+'90') 1170 }); 1171 }); 1172 }, 50); 1173 } 1174 }, opts)); 1175 }; 1176})(window.jQuery || window.Zepto); 1177 1178(function($) { 1179 flux.transitions.warp = function(fluxslider, opts) { 1180 return new flux.transitions.concentric(fluxslider, $.extend({ 1181 delay: 30, 1182 alternate: true 1183 }, opts)); 1184 }; 1185})(window.jQuery || window.Zepto); 1186 1187(function($) { 1188 flux.transitions.cube = function(fluxslider, opts) { 1189 return new flux.transition(fluxslider, $.extend({ 1190 requires3d: true, 1191 barWidth: 100, 1192 direction: 'left', 1193 perspective: 1000, 1194 setup: function() { 1195 1196 var width = $(this.slider.element.selector).width(); 1197 var height = $(this.slider.element.selector).height(); 1198 1199 // Setup the container to allow 3D perspective 1200 1201 this.slider.image1.css3({ 1202 'perspective': this.options.perspective, 1203 'perspective-origin': '50% 50%' 1204 }); 1205
1206 this.cubeContainer = $('<div class="cube"></div>').css({ 1207 width: width+'px', 1208 height: height+'px', 1209 position: 'relative' 1210 }).css3({ 1211 'transition-duration': '800ms', 1212 'transition-timing-function': 'linear', 1213 'transition-property': 'all', 1214 'transform-style': 'preserve-3d' 1215 }); 1216 1217 var css = { 1218 height: '100%', 1219 width: '100%', 1220 position: 'absolute', 1221 top: '0px', 1222 left: '0px' 1223 }; 1224 1225 var currentFace = $('<div class="face current"></div>').css($.extend(css, { 1226 background: this.slider.image1.css('background-image'), 1227 1228 'background-size': $(this.slider.element.selector).width()+'px ' 1229 + $(this.slider.element.selector).height() + 'px', 1230 'background-repeat': 'no-repeat', 1231 1232 })).css3({ 1233 'backface-visibility': 'hidden' 1234 }); 1235 1236 this.cubeContainer.append(currentFace); 1237 1238 var nextFace = $('<div class="face next"></div>').css($.extend(css, { 1239 background: this.slider.image2.css('background-image'), 1240 1241 'background-size': $(this.slider.element.selector).width()+'px ' 1242 + $(this.slider.element.selector).height() + 'px', 1243 'background-repeat': 'no-repeat', 1244 1245 })).css3({ 1246 'transform' : this.options.transitionStrings.call(this, this.options.direction, 'nextFace'), 1247 'backface-visibility': 'hidden' 1248 }); 1249 1250 this.cubeContainer.append(nextFace); 1251 1252 this.slider.image1.append(this.cubeContainer); 1253 }, 1254 execute: function() { 1255 var _this = this; 1256 1257 var width = this.slider.image1.width(); 1258 var height = this.slider.image1.height(); 1259 1260 this.slider.image2.hide(); 1261 this.cubeContainer.transitionEnd(function(){ 1262 _this.slider.image2.show(); 1263 1264 _this.finished(); 1265 }); 1266 1267 setTimeout(function(){ 1268 _this.cubeContainer.css3({ 1269 'transform' : _this.options.transitionStrings.call(_this, _this.options.direction, 'container') 1270 }); 1271 }, 50); 1272 }, 1273 transitionStrings: function(direction, elem) { 1274 var width = this.slider.image1.width(); 1275 var height = this.slider.image1.height(); 1276 1277 // Define the various transforms that are required to perform various cube rotations 1278 var t = { 1279 'up' : { 1280 'nextFace': flux.browser.rotateX(-90) + ' ' + flux.browser.translate(0, height/2, height/2), 1281 'container': flux.browser.rotateX(90) + ' ' + flux.browser.translate(0, -height/2, height/2) 1282 }, 1283 'down' : { 1284 'nextFace': flux.browser.rotateX(90) + ' ' + flux.browser.translate(0, -height/2, height/2), 1285 'container': flux.browser.rotateX(-90) + ' ' + flux.browser.translate(0, height/2, height/2) 1286 }, 1287 'left' : { 1288 'nextFace': flux.browser.rotateY(90) + ' ' + flux.browser.translate(width/2, 0, width/2), 1289 'container': flux.browser.rotateY(-90) + ' ' + flux.browser.translate(-width/2, 0, width/2) 1290 }, 1291 'right' : { 1292 'nextFace': flux.browser.rotateY(-90) + ' ' + flux.browser.translate(-width/2, 0, width/2), 1293 'container': flux.browser.rotateY(90) + ' ' + flux.browser.translate(width/2, 0, width/2) 1294 } 1295 }; 1296 1297 return (t[direction] && t[direction][elem]) ? t[direction][elem] : false; 1298 } 1299 }, opts)); 1300 }; 1301})(window.jQuery || window.Zepto); 1302 1303(function($) { 1304 flux.transitions.tiles3d = function(fluxslider, opts) { 1305 return new flux.transition_grid(fluxslider, $.extend({ 1306 requires3d: true, 1307 forceSquare: true, 1308 columns: 10, 1309 rows: 10, 1310 perspective: 600, 1311 delayBetweenBarsX: 200, 1312 delayBetweenBarsY: 150, 1313 renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) { 1314 var tile = $('<div></div>').css({ 1315 width: colWidth+'px', 1316 height: rowHeight+'px', 1317 position: 'absolute', 1318 top: '0px', 1319 left: '0px', 1320 //'z-index': 200, // Removed to make compatible with FF10 (Chrome bug seems to have been fixed) 1321 1322 'background-image': this.slider.image1.css('background-image'), 1323 'background-position': '-'+leftOffset+'px -'+topOffset+'px', 1324 'background-repeat': 'no-repeat', 1325 '-moz-transform': 'translateZ(1px)', 1326 1327 'background-size': $(this.slider.element.selector).width()+'px ' 1328 + $(this.slider.element.selector).height() + 'px', 1329 'background-repeat': 'no-repeat', 1330 1331 1332 }).css3({ 1333 'backface-visibility': 'hidden' 1334 }); 1335 1336 var tile2 = $(tile.get(0).cloneNode(false)).css({ 1337 'background-image': this.slider.image2.css('background-image') 1338 //'z-index': 190 // Removed to make compatible with FF10 (Chrome bug seems to have been fixed) 1339 }).css3({ 1340 'transform': flux.browser.rotateY(180), 1341 'backface-visibility': 'hidden' 1342 }); 1343 1344 $(elem).css({ 1345 'z-index': (colIndex > this.options.columns/2 ? 500-colIndex : 500) + (rowIndex > this.options.rows/2 ? 500-rowIndex : 500) // Fix for Chrome to ensure that the z-index layering is correct! 1346 }).css3({ 1347 'transition-duration': '800ms', 1348 'transition-timing-function': 'ease-out', 1349 'transition-property': 'all', 1350 'transition-delay': (colIndex*this.options.delayBetweenBarsX+rowIndex*this.options.delayBetweenBarsY)+'ms', 1351 'transform-style': 'preserve-3d' 1352 }).append(tile).append(tile2); 1353 }, 1354 execute: function() { 1355 this.slider.image1.css3({ 1356 'perspective': this.options.perspective, 1357 'perspective-origin': '50% 50%' 1358 }); 1359 1360 var _this = this; 1361 1362 var tiles = this.slider.image1.find('div.tile'); 1363 1364 this.slider.image2.hide(); 1365 1366 // Get notified when the last transition has completed
1367 tiles.last().transitionEnd(function(event){ 1368 _this.slider.image2.show(); 1369 1370 _this.finished(); 1371 }); 1372 1373 setTimeout(function(){ 1374 tiles.css3({ 1375 'transform': flux.browser.rotateY(180) 1376 }); 1377 }, 50); 1378 } 1379 }, opts)); 1380 }; 1381})(window.jQuery || window.Zepto); 1382 1383(function($) { 1384 flux.transitions.turn = function(fluxslider, opts) { 1385 return new flux.transition(fluxslider, $.extend({ 1386 requires3d: true, 1387 perspective: 1300, 1388 direction: 'left', 1389 setup: function() { 1390 var tab = $('<div class="tab"></div>').css({ 1391 width: '50%', 1392 height: '100%', 1393 position: 'absolute', 1394 top: '0px', 1395 left: this.options.direction == 'left' ? '50%' : '0%', 1396 'z-index':101 1397 }).css3({ 1398 'transform-style': 'preserve-3d', 1399 'transition-duration': '1000ms', 1400 'transition-timing-function': 'ease-out', 1401 'transition-property': 'all', 1402 'transform-origin': this.options.direction == 'left' ? 'left center' : 'right center' 1403 }), 1404 1405 front = $('<div></div>').appendTo(tab).css({ 1406 'background-image': this.slider.image1.css('background-image'), 1407 'background-position': (this.options.direction == 'left' ? '-'+(this.slider.image1.width()/2) : 0)+'px 0', 1408 width: '100%', 1409 height: '100%', 1410 position: 'absolute', 1411 top: '0', 1412 left: '0', 1413 '-moz-transform': 'translateZ(1px)' 1414 }).css3({ 1415 'backface-visibility': 'hidden' 1416 }), 1417 1418 back = $('<div></div>').appendTo(tab).css({ 1419 'background-image': this.slider.image2.css('background-image'), 1420 'background-position': (this.options.direction == 'left' ? 0 : '-'+(this.slider.image1.width()/2))+'px 0', 1421 width: '100%', 1422 height: '100%', 1423 position: 'absolute', 1424 top: '0', 1425 left: '0' 1426 }).css3({ 1427 transform: flux.browser.rotateY(180), 1428 'backface-visibility': 'hidden' 1429 }), 1430 1431 current = $('<div></div>').css({ 1432 position: 'absolute', 1433 top: '0', 1434 left: this.options.direction == 'left' ? '0' : '50%', 1435 width: '50%', 1436 height: '100%', 1437 'background-image': this.slider.image1.css('background-image'), 1438 'background-position': (this.options.direction == 'left' ? 0 : '-'+(this.slider.image1.width()/2))+'px 0', 1439 'z-index':100 1440 }), 1441 1442 overlay = $('<div class="overlay"></div>').css({ 1443 position: 'absolute', 1444 top: '0', 1445 left: this.options.direction == 'left' ? '50%' : '0', 1446 width: '50%', 1447 height: '100%', 1448 background: '#000', 1449 opacity: 1 1450 }).css3({ 1451 'transition-duration': '800ms', 1452 'transition-timing-function': 'linear', 1453 'transition-property': 'opacity' 1454 }), 1455
1456 container = $('<div></div>').css3({ 1457 width: '100%', 1458 height: '100%' 1459 }).css3({ 1460 'perspective': this.options.perspective, 1461 'perspective-origin': '50% 50%' 1462 }).append(tab).append(current).append(overlay); 1463 1464 this.slider.image1.append(container); 1465 }, 1466 execute: function() { 1467 var _this = this; 1468 1469 this.slider.image1.find('div.tab').first().transitionEnd(function(){ 1470 _this.finished(); 1471 }); 1472 1473 setTimeout(function(){ 1474 _this.slider.image1.find('div.tab').css3({ 1475 // 179 not 180 so that the tab rotates the correct way in Firefox 1476 transform: flux.browser.rotateY(_this.options.direction == 'left' ? -179 : 179) 1477 }); 1478 _this.slider.image1.find('div.overlay').css({ 1479 opacity: 0 1480 }); 1481 }, 50); 1482 } 1483 }, opts)); 1484 }; 1485})(window.jQuery || window.Zepto); 1486 1487(function($) { 1488 flux.transitions.slide = function(fluxslider, opts) { 1489 return new flux.transition(fluxslider, $.extend({ 1490 direction: 'left', 1491 setup: function() { 1492 var width = this.slider.image1.width(), 1493 height = this.slider.image1.height(), 1494 1495 currentImage = $('<div class="current"></div>').css({ 1496 height: '100%', 1497 width: '100%', 1498 position: 'absolute', 1499 top: '0px', 1500 left: '0px', 1501 background: this.slider[this.options.direction == 'left' ? 'image1' : 'image2'].css('background-image'), 1502 'background-size':'50% 100%' 1503 }).css3({ 1504 'backface-visibility': 'hidden' 1505 }), 1506 1507 nextImage = $('<div class="next"></div>').css({ 1508 height: '100%', 1509 width: '100%', 1510 position: 'absolute', 1511 top: '0px', 1512 left: width+'px', 1513 background: this.slider[this.options.direction == 'left' ? 'image2' : 'image1'].css('background-image'), 1514 'background-size':'50% 100%' 1515 }).css3({ 1516 'backface-visibility': 'hidden' 1517 }); 1518
1519 this.slideContainer = $('<div class="slide"></div>').css({ 1520 width: '200%', 1521 height: '100%', 1522 position: 'relative', 1523 left: this.options.direction == 'left' ? '0px' : -width+'px', 1524 'z-index': 101 1525 }).css3({ 1526 'transition-duration': '600ms', 1527 'transition-timing-function': 'ease-in', 1528 'transition-property': 'all' 1529 }); 1530 1531 this.slideContainer.append(currentImage).append(nextImage); 1532 1533 this.slider.image1.append(this.slideContainer); 1534 }, 1535 execute: function() { 1536 var _this = this, 1537 delta = this.slider.image1.width(); 1538 1539 if(this.options.direction == 'left') 1540 delta = -delta; 1541 1542 this.slideContainer.transitionEnd(function(){ 1543 _this.finished(); 1544 }); 1545 1546 setTimeout(function(){ 1547 _this.slideContainer.css3({ 1548 'transform' : flux.browser.translate(delta) 1549 }); 1550 }, 50); 1551 } 1552 }, opts)); 1553 }; 1554})(window.jQuery || window.Zepto); 1555 1556(function($) { 1557 flux.transitions.swipe = function(fluxslider, opts) { 1558 return new flux.transition(fluxslider, $.extend({ 1559 setup: function() { 1560 var img = $('<div></div>').css({ 1561 width: '100%', 1562 height: '100%', 1563 'background-image': this.slider.image1.css('background-image') 1564 }).css3({ 1565 'transition-duration': '1600ms', 1566 'transition-timing-function': 'ease-in', 1567 'transition-property': 'all', 1568 'mask-image': '-webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 48%, rgba(0,0,0,1) 52%, rgba(0,0,0,1) 100%)', 1569 'mask-position': '70%', 1570 'mask-size': '400%' 1571 }); 1572 1573 this.slider.image1.append(img); 1574 }, 1575 execute: function() { 1576 //return; 1577 var _this = this, 1578 img = this.slider.image1.find('div'); 1579 1580 // Get notified when the last transition has completed 1581 $(img).transitionEnd(function(){ 1582 _this.finished(); 1583 }); 1584 1585 setTimeout(function(){ 1586 $(img).css3({ 1587 'mask-position': '30%' 1588 }); 1589 }, 50); 1590 }, 1591 compatibilityCheck: function() { 1592 return flux.browser.supportsCSSProperty('MaskImage'); 1593 } 1594 }, opts)); 1595 }; 1596})(window.jQuery || window.Zepto); 1597 1598(function($) { 1599 flux.transitions.dissolve = function(fluxslider, opts) { 1600 return new flux.transition(fluxslider, $.extend({ 1601 setup: function() { 1602 var img = $('<div class="image"></div>').css({ 1603 width: '100%', 1604 height: '100%', 1605 'background-image': this.slider.image1.css('background-image'), 1606 'background-size': '100% 100%' 1607 }).css3({ 1608 'transition-duration': '1000ms', 1609 'transition-timing-function': 'ease-in', 1610 'transition-property': 'opacity' 1611 }); 1612 1613 this.slider.image1.append(img); 1614 }, 1615 execute: function() { 1616 var _this = this, 1617 img = this.slider.image1.find('div.image'); 1618 1619 // Get notified when the last transition has completed 1620 $(img).transitionEnd(function(){ 1621 _this.finished(); 1622 }); 1623 1624 setTimeout(function(){ 1625 $(img).css({ 1626 'opacity': '0.0' 1627 }); 1628 }, 50); 1629 } 1630 }, opts)); 1631 }; 1632})(window.jQuery || window.Zepto); 1633 1634
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.