1function onYouTubeIframeAPIReady(){ 2 if(PEXETO.pendingVideoFunction){ 3 PEXETO.pendingVideoFunction.call(); 4 } 5} 6 7 8/** 9 * This is the script for the content slider - it slides between different slides with 10 * different animation. Each slide is composed of two sections and each of this section 11 * is animated in a random effect. 12 * 13 * Dependencies: 14 * - jQuery 15 * - jQuery Easing : http://gsgd.co.uk/sandbox/jquery/easing/ 16 * 17 * @author Pexeto 18 * http://pexetothemes.com 19 */ 20(function($) { 21 "use strict"; 22 23 $.fn.pexetoContentSlider = function(options) { 24 var defaults = { 25 //set the default options (can be overwritten from the calling function) 26 autoplay : true, 27 animationInterval : 5000, 28 //the interval between each animation when autoplay is true 29 pauseOnHover : true, 30 //if true the animation will be paused when the mouse is 31 // over the slider 32 pauseInterval : 5000, 33 //the time that the animation will be paused after a click 34 animationSpeed : 400, 35 easing : 'easeOutSine', 36 buttons : true, 37 //show the navigation buttons 38 arrows : true, 39 thumbnailPreview : true, 40 //show the navigation arrows 41 //selectors, classes and IDs 42 ulSel : '#cs-slider-ul', 43 navigationId : 'cs-navigation', 44 selectedClass : 'selected', 45 firstBoxSel : '.cs-content-left', 46 secondBoxSel : '.cs-content-right', 47 centerBoxSel : '.cs-content-centered', 48 prevArrowClass : 'cs-arrows cs-prev-arrow', 49 nextArrowClass : 'cs-arrows cs-next-arrow', 50 loadingClass : 'cs-loading' 51 }; 52 53 54 var o = $.extend(defaults, options), 55 $root = null, 56 $parent = null, 57 $ul = null, 58 $nav = null, 59 $navLi = null, 60 $prevArrow = null, 61 $nextArrow = null, 62 itemNum = 0, 63 currentIndex = 0, 64 timer = 0, 65 stopped = true, 66 inAnimation = false, 67 sliderHeight = 0, 68 showEffects = ['slideLeft', 'slideRight', 'slideUp', 'slideDown'], 69 showEffectNum = showEffects.length, 70 slides = [], 71 $newBgImage = null, 72 $oldBgImage = null, 73 defaultBg = '#252525', 74 isIe8 = PEXETO.getBrowser().msie && PEXETO.getBrowser().version<=8, 75 loadProgress = 0, 76 videoId = 0, 77 videoPlaying = false, 78 videoLoading = false, 79 pendingVideoFunction = null, 80 mouseIn = false, 81 supportsTransition = PEXETO.utils.supportsTransition(), 82 isMobile = PEXETO.utils.checkIfMobile(), 83 elTiming = isMobile ? 300 : 150; 84 85 $root = $(this); 86 $parent = $root.parent(); 87 $ul = $(o.ulSel); 88 89 90 /** 91 * Inits the slider - calls the main functionality. 92 */ 93 94 function init() { 95 96 $root.addClass(o.loadingClass); 97 98 //get the items number 99 itemNum = $ul.find('li').each(function(i) { 100 var $li = $(this), 101 layout = $li.data('layout'); 102 103 104 slides[i] = { 105 firstBox: layout === 'centered' ? $li.find(o.centerBoxSel) : $li.find(o.firstBoxSel), 106 secondBox: layout === 'centered' ? null : $li.find(o.secondBoxSel), 107 li:$li, 108 layout:layout, 109 animation:$li.data('animation') 110 }; 111 112 if(o.thumbnailPreview && $li.data('thumbnail')){ 113 slides[i].thumbnail = $li.data('thumbnail'); 114 } 115 116 if($li.data('bg_image_url')){ 117 slides[i].bgImage = $li.data('bg_image_url'); 118 slides[i].bgOpacity = $li.data('bg_image_opacity'); 119 } 120 121 if($li.data('bg_align')){ 122 slides[i].bgAlign = $li.data('bg_align'); 123 } 124 125 if($li.data('bg_style')){ 126 slides[i].bgStyle = $li.data('bg_style'); 127 } 128 129 if($li.data('bg_color')){ 130 slides[i].bgColor = $li.data('bg_color'); 131 $parent.css({backgroundColor:slides[i].bgColor}); 132 } 133 134 if($li.data('video')){ 135 slides[i].video = $li.data('video'); 136 } 137 138 }).length; 139 140 if(!o.arrows && isMobile && itemNum>=1){ 141 //show the arrows on mobile 142 o.arrows = true; 143 } 144 145 if(!o.arrows || itemNum<=1){ 146 o.thumbnailPreview = false; 147 } 148 149 150 151 $.when(loadSlideImages(0,0), setSliderPadding()).done(function(){ 152 doOnImgLoaded(); 153 $root.removeClass(o.loadingClass); 154 showSlide(0);
155 }); 156 157 if(itemNum<=1){ 158 o.buttons=false; 159 o.arrows=false; 160 o.autoplay=false; 161 } 162 163 if(isMobile){ 164 o.autoplay=false; 165 } 166 167 loadSlideImages(1,itemNum-1).done(doOnImgLoaded); 168 } 169 170 function doOnImgLoaded(){ 171 loadProgress+=0.5; 172 if(loadProgress===1){ 173 //both the first image and the rest of the images have been loaded 174 //init the slider functionality 175 176 //set the navigation buttons 177 setNavigation(); 178 bindEventHandlers(); 179 180 if(o.thumbnailPreview){ 181 setThumbnailPreviews(0); 182 } 183 184 //the images are loaded, start the animation 185 if(o.autoplay) { 186 startAnimation(); 187 } 188 189 } 190 } 191 192 function loadSlideImages(firstIndex, lastIndex){ 193 var deferred = new $.Deferred(), 194 progress = 0, 195 imgSrcToLoad = [], 196 imagesToLoad = [], 197 imgNum = 0, 198 imgLoaded = 0, 199 img = null, 200 i, 201 onImgLoaded = function(){ 202 imgLoaded++; 203 204 if(imgLoaded===imgNum){ 205 deferred.resolve(); 206 } 207 }; 208 209 for(i=firstIndex; i<=lastIndex; i++){ 210 slides[i].li.find('img').each(function(){ 211 imgSrcToLoad.push($(this).attr('src')); 212 }); 213 214 if(slides[i].bgImage){ 215 imgSrcToLoad.push(slides[i].bgImage); 216 } 217 218 if(o.thumbnailPreview && slides[i].thumbnail){ 219 imgSrcToLoad.push(slides[i].thumbnail); 220 } 221 } 222 223 imgNum = imgSrcToLoad.length; 224 225 for(i=0; i<imgNum; i++){ 226 img = new Image(); 227 img.src = imgSrcToLoad[i]; 228 imagesToLoad.push($(img)); 229 } 230 231 if(imgNum===0){ 232 deferred.resolve(); 233 }else{ 234 for(i=0; i<imgNum; i++){ 235 imagesToLoad[i].pexetoOnImgLoaded({callback:onImgLoaded}); 236 } 237 } 238 239 return deferred; 240 } 241 242 function setSliderPadding(){ 243 var deferred = new $.Deferred(), 244 $logoImg; 245 246 if(isMobile){ 247 deferred.resolve(); 248 return deferred; 249 } 250 251 $logoImg = $('#logo-container').find('img'); 252 253 if($logoImg.length){ 254 $logoImg.pexetoOnImgLoaded({callback:function(){ 255 var logoHeight = $logoImg.height(); 256 $parent.css({paddingTop:logoHeight}); 257 258 deferred.resolve(); 259 }}); 260 } 261 262 return deferred; 263 } 264 265 /** 266 * Binds event handlers for the main slider functionality. 267 */ 268 269 function bindEventHandlers() { 270 271 if(o.buttons) { 272 //add event handlers 273 $nav.on({ 274 'click': doOnBtnClick, 275 'slideChanged': doOnSlideChanged 276 }, 'li'); 277 278 } 279 280 if(o.arrows) { 281 $prevArrow.on('click', function() { 282 mouseIn = true; 283 doOnArrowClick(false); 284 }); 285 $nextArrow.on('click', function() { 286 mouseIn = true; 287 doOnArrowClick(true); 288 }); 289 } 290 291 292 293 //display/hide the navigation on $root hover 294 $root.on({ 295 'mouseenter': doOnSliderMouseEnter, 296 'mouseleave': doOnSliderMouseLeave 297 }); 298 299 $(window).on('resize', function(){ 300 setSliderHeight(currentIndex); 301 centerSlide(currentIndex); 302 }); 303 } 304 305 /** 306 * Calls the functionality to change the current slide with another one. 307 * @param {int} index the index of the new slide 308 */ 309 310 function changeSlide(index) { 311 if(!inAnimation) { 312 inAnimation = true; 313 hideSlide(currentIndex); 314 showSlide(index); 315 currentIndex = index; 316 317 if(o.thumbnailPreview){ 318 setThumbnailPreviews(index); 319 } 320 321 if(o.buttons) { 322 $navLi.trigger('slideChanged'); 323 } 324 } 325 } 326 327 function setThumbnailPreviews(index){ 328 var nextSlideIndex = getNextSlideIndex(index), 329 prevSlideIndex = getPrevSlideIndex(index); 330 setThumbnailPreview($nextArrow, nextSlideIndex); 331 setThumbnailPreview($prevArrow, prevSlideIndex); 332 } 333 334 function setThumbnailPreview($arrow, index){ 335 var thumbnail = slides[index].thumbnail; 336 $arrow.find('.cs-thumbnail').remove(); 337 338 if(thumbnail){ 339 $arrow.prepend('<img src="'+thumbnail+'" class="cs-thumbnail" />'); 340 } 341 } 342 343 344 /** 345 * Adds navigation buttons to the slider and sets event handler functions to them. 346 */ 347 348 function setNavigation() { 349 var i, html = ''; 350 351 //generate the buttons 352 if(o.buttons) { 353 $nav = $('<ul />', { 354 id: o.navigationId 355 }); 356 for(i = 0; i < itemNum; i++) { 357 html += '<li><span></span></li>'; 358 } 359 $nav.html(html).appendTo($root).fadeIn(700); 360 361 $navLi = $nav.find('li'); 362 $navLi.eq(0).addClass(o.selectedClass); 363 } 364 365 //generate the arrows 366 if(o.arrows) { 367 $prevArrow = $('<div />', { 368 'class': o.prevArrowClass 369 }).appendTo($root); 370 $nextArrow = $('<div />', { 371 'class': o.nextArrowClass 372 }).appendTo($root); 373 } 374 375 } 376 377 /*********************************************************************** 378 * EVENT HANDLER FUNCTIONS 379 **********************************************************************/ 380 381 /** 382 * On arrow click event handler. Calls a function to change the slide 383 * depending on which arrow (previous/next) was clicked. 384 * @param {boolean} next whether the next arrow is clicked (set it to true) 385 * or the previous one was cicked (set it to false) 386 */ 387 388 function doOnArrowClick(next) { 389 var index; 390 if(next) { 391 //next index will be the next item if there is one or the first item 392 index = getNextSlideIndex(currentIndex); 393 } else { 394 //previous index will be the previous item if there is one or the last item 395 index = getPrevSlideIndex(currentIndex); 396 } 397 if(!inAnimation) { 398 pause(); 399 } 400 changeSlide(index); 401 } 402 403 function getNextSlideIndex(index){ 404 return index + 1 < itemNum ? index + 1 : 0; 405 } 406 407 function getPrevSlideIndex(index){ 408 return index - 1 >= 0 ? index - 1 : itemNum - 1; 409 } 410 411 /** 412 * On slider mouse enter event handler. 413 */ 414 415 function doOnSliderMouseEnter() { 416 if(o.buttons) { 417 //show the buttons 418 $nav.stop().fadeIn(function() { 419 $nav.animate({ 420 opacity: 1 421 }, 0); 422 }); 423 } 424 425 if(o.autoplay && o.pauseOnHover) { 426 //pause the animation 427 stopAnimation(); 428 mouseIn = true; 429 } 430 } 431 432 /** 433 * On slider mouse leave event handler. 434 */ 435 436 function doOnSliderMouseLeave() { 437 if(o.buttons) { 438 //hide the buttons 439 $nav.stop().animate({ 440 opacity: 0 441 }); 442 } 443 444 if(o.autoplay && o.pauseOnHover) { 445 //resume the animation 446 mouseIn = false; 447 startAnimation(); 448 } 449 } 450 451 /** 452 * On navigation button click event handler. Calls the functionality
453 * to show the slide that corresponds to the button index. 454 * @param {object} e the event object 455 */ 456 457 function doOnBtnClick(e) { 458 e.stopPropagation(); 459 var index = $navLi.index($(this)); 460 if(!inAnimation) { 461 pause(); 462 } 463 if(currentIndex !== index) { 464 changeSlide(index); 465 } 466 } 467 468 /** 469 * On slider change event handler. Sets the current button in the navigation 470 * to be selected according to the current slide index. 471 */ 472 473 function doOnSlideChanged() { 474 var index = $navLi.index($(this)); 475 if(currentIndex === index) { 476 $(this).addClass(o.selectedClass); 477 } else { 478 $(this).removeClass(o.selectedClass); 479 } 480 } 481 482 /*************************************************************************** 483 * ANIMATION FUNCTIONS 484 **************************************************************************/ 485 486 /** 487 * Hides a slide with a random animation. 488 * @param {int} index the index of the slide to be displayed 489 */ 490 491 function hideSlide(index) { 492 493 var slide = slides[index], 494 $firstBox = slides[index].firstBox, 495 $secondBox = slides[index].secondBox, 496 finishHide = function($box){ 497 slide.li.hide(); 498 $box.find('.cs-element').removeClass('cs-animate'); 499 }; 500 501 if(slide.video){ 502 hideVideo(slide); 503 } 504 505 506 //hide the first box 507 hideInnerElements($firstBox, function(){ 508 finishHide($firstBox); 509 }); 510 511 //hide the second box 512 if($secondBox){ 513 hideInnerElements($secondBox, function(){ 514 finishHide($secondBox); 515 }); 516 } 517 518 if($newBgImage){ 519 //fade out the background image 520 $oldBgImage = $newBgImage; 521 $oldBgImage.animate({opacity:0}
521, 1000, function(){ 522 $(this).remove(); 523 $oldBgImage = null; 524 }); 525 } 526 527 } 528 529 function hideInnerElements($box, callback){ 530 var $elements = $box.find('.cs-element'); 531 $elements.css({opacity:0}); 532 if(callback){ 533 if(supportsTransition){ 534 $elements.last().on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){ 535 callback.call(); 536 $(this).off('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd'); 537 }); 538 }else{ 539 callback.call(); 540 } 541 } 542 } 543 544 function centerSlide(index){ 545 var slide = slides[index]; 546 547 if(slide.layout=='centered'){ 548 var liHeight = slide.li.height(), 549 ulHeight = Math.max(sliderHeight, parseInt($ul.css('minHeight'), 10)); 550 if(ulHeight > liHeight){ 551 slide.li.css({paddingTop:((ulHeight-liHeight)/2)}); 552 } 553 } 554 } 555 556 /** 557 * Displays a slide with a random animation. 558 * @param {int} index the index of the slide to be displayed 559 */ 560 561 function showSlide(index) { 562 var slide = slides[index], 563 animation = slide.animation === 'random' ? 564 showEffects[Math.floor(Math.random() * showEffectNum)] : 565 slide.animation, 566 //get a random effect 567 $firstBox = slide.firstBox, 568 $secondBox = slide.secondBox, 569 lastBox = true; 570 571 572 videoPlaying = false; 573 slide.li.show(); 574 575 if(slide.video){ 576 initVideo(slide); 577 } 578 579 580 setSliderHeight(index); 581 582 centerSlide(index); 583 584 585 //show the background image 586 if(slide.bgImage){ 587 var cssArgs = {backgroundImage:'url('+slide.bgImage+')'}; 588 if(slide.bgAlign){ 589 cssArgs.backgroundPosition = slide.bgAlign; 590 } 591 592 if(slide.bgStyle){ 593 //only the default style is parallax (background-attachment fixed), the other styles are scroll 594 cssArgs.backgroundAttachment = 'scroll'; 595 if(slide.bgStyle==='contain'){ 596 cssArgs.backgroundSize = 'contain'; 597 } 598 } 599 600 $newBgImage = $('<div />', {'class':'full-bg-image'}) 601 .css(cssArgs) 602 .insertBefore($root) 603 .animate({opacity:slide.bgOpacity}, 1000); 604 605 if(isIe8){ 606 new PEXETO.utils.bgCoverFallback($newBgImage).init(); 607 } 608 609 } 610 611 if(slide.bgColor){ 612 $parent.css({backgroundColor:'#'+slide.bgColor}); 613 }else if($parent.css('backgroundColor')!==defaultBg){ 614 $parent.css({backgroundColor:defaultBg}); 615 } 616 617 $.when( 618 (function(){ 619 //animate the first box elements with a delay 620 var def = new $.Deferred(); 621 setTimeout(function() { 622 showInnerElements($firstBox, animation, def); 623 }, o.animationSpeed / 2 + 150); 624 return def; 625 }()), 626 (function(){ 627 //animate the second box elements 628 var def = new $.Deferred(); 629 if($secondBox){ 630 showInnerElements($secondBox, animation, def); 631 }else{ 632 def.resolve(); 633 } 634 return def; 635 }()) 636 ).done(function(){ 637 setEndAnimation(); 638 }); 639 } 640 641 function initVideo (slide) { 642 videoLoading = true; 643 pause(); 644 645 var videoElId = 'video-'+(videoId++), 646 initElVideo = function(){ 647 var player = new YT.Player(videoElId, { 648 height: '100%', 649 width: '100%', 650 videoId: slide.video, 651 events: { 652 'onReady': function(){ 653 slide.$videoWrap 654 .animate({opacity:1}, 700) 655 .parent().removeClass('loading'); 656 videoLoading = false; 657 startAnimation(); 658 659 660 }, 661 'onStateChange': function(event){ 662 if (event.data == YT.PlayerState.PLAYING) { 663 stopAnimation(); 664 videoPlaying = true; 665 } 666 } 667 } 668 }); 669 670 PEXETO.init.ieIframeFix(); //fix the iframe z-index bug on IE 671 672 }; 673 674 slide.$videoWrap = slide.li.find('.cs-video:first').css({opacity:0}); 675 $('<div />', {'id':videoElId}).appendTo(slide.$videoWrap); 676 slide.$videoWrap.parent().addClass('loading'); 677 678 if(window.YT && window.YT.Player){ 679 initElVideo(); 680 }else{ 681 PEXETO.pendingVideoFunction = initElVideo; 682 } 683 } 684 685 function hideVideo(slide){ 686 slide.$videoWrap.animate({opacity:0}
686, function(){ 687 slide.$videoWrap.empty(); 688 }); 689 } 690 691 function showInnerElements($box, animation, def){ 692 var i = 100, 693 settings = getPositionPropertySettings(animation), 694 animateProperty = settings.property, 695 mult = settings.mult, 696 pos = 150*mult, 697 $elements = $box.find('.cs-element'); 698 699 if(!$elements.length){ 700 def.resolve(); 701 return; 702 } 703 704 $elements.each(function(index){ 705 var $el = $(this), 706 args = {opacity:0}; 707 708 if(!isMobile){ 709 args[animateProperty] = pos; 710 } 711 712 $el.css(args); 713 714 setTimeout(function(){ 715 var showArgs = {opacity:1}, 716 args; 717 showArgs[animateProperty] = 0; 718 args = [showArgs]; 719 720 if(index===$elements.length-1){ 721 //add a callback function to be executed after the 722 //element animation 723 args.push(function(){ 724 def.resolve(); 725 }); 726 } 727 728 $el.addClass('cs-animate'); 729 $.fn.pexetoTransit.apply($el, args); 730 731 }, i); 732 i+=elTiming; 733 pos = pos > 20 ? pos-20 : pos; 734 }); 735 } 736 737 function getPositionPropertySettings(animation){ 738 var settings = { 739 'slideLeft' : {property: 'left', mult: 1}, 740 'slideRight' : {property: 'left', mult: -1}, 741 'slideUp' : {property: 'top', mult: 1}, 742 'slideDown' : {property: 'top', mult: -1} 743 }; 744 745 return settings[animation]; 746 747 } 748 749 function setSliderHeight(index){ 750 751 sliderHeight = slides[index].li.height(); 752 753 $ul.css({height: sliderHeight}); 754 } 755 756 757 /** 758 * Starts the animation. 759 */ 760 761 function startAnimation() { 762 if(o.autoplay && stopped && !videoPlaying) { 763 if(o.pauseOnHover && mouseIn){ 764 //the mouse is still within the container 765 return; 766 } 767 stopped = false; 768 timer = window.setInterval(callNextSlide, o.animationInterval); 769 } 770 } 771 772 /** 773 * Sets the inAnimation variable to false. 774 */ 775 776 function setEndAnimation() { 777 inAnimation = false; 778 } 779 780 /** 781 * Triggers a changeSlide event to display the next slide. 782 */ 783 784 function callNextSlide() { 785 if(!videoLoading){ 786 var nextIndex = (currentIndex < itemNum - 1) ? (currentIndex + 1) : 0; 787 changeSlide(nextIndex); 788 } 789 } 790 791 /** 792 * Stops the animation. 793 */ 794 795 function stopAnimation() { 796 if(o.autoplay) { 797 window.clearInterval(timer); 798 timer = -1; 799 stopped = true; 800 } 801 } 802 803 /** 804 * Pauses the animation. 805 */ 806 807 function pause() { 808 if(o.autoplay) { 809 window.clearInterval(timer); 810 timer = -1; 811 if(!stopped) { 812 window.setTimeout(startAnimation, o.pauseInterval); 813 } 814 stopped = true; 815 } 816 } 817 818 819 init(); 820 821 }; 822 823}(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.