1/** 2 * Tonjoo Fluid Responsive Slideshow 3 * Copyright 2013, Tonjoo 4 * Free to use under the MIT license. 5 * http://www.opensource.org/licenses/mit-license.php 6 */ 7 8;(function($) { 9 10 $.fn.frs = function(options) { 11 12 //Defaults to extend options 13 var defaults = { 14 'animation': 'horizontal-slide', // horizontal-slide, vertical-slide, fade 15 'animationSpeed': 600, // how fast animtions are 16 'timer': false, // true or false to have the timer 17 'advanceSpeed': 4000, // if timer is enabled, time between transitions 18 'pauseOnHover': true, // if you hover pauses the slider 19 'startClockOnMouseOut': false, // if clock should start on MouseOut 20 'startClockOnMouseOutAfter': 1000, // how long after MouseOut should the timer start again 21 'directionalNav': true, // manual advancing directional navs 22 'captions': true, // do you want captions? 23 'captionAnimation': 'fade', // fade, slideOpen, none 24 'captionAnimationSpeed': 600, // if so how quickly should they animate in 25 'bullets': false, // true or false to activate the bullet navigation 26 'bulletThumbs': false, // thumbnails for the bullets 27 'bulletThumbLocation': '', // location from this file where thumbs will be 28 'afterSlideChange': function() {}, // empty function 29 'navigationSmallTreshold': 650, 30 'navigationSmall': false, 31 'skinClass': 'default', 32 'width': 650, 33 'height': 350, 34 'fullWidth': false, 35 'minHeight': 300, 36 'maxHeight': 0, // '0' (zero) to unlimited 37 'sbullets': false, 38 'sbulletsItemWidth': 200, 39 'continousSliding': false, 40 'jsOnly': false, 41 'slideParameter': [] 42 }; 43 44 45 // Extend those options 46 var options = $.extend(defaults, options); 47 48 frs_id = "#" + this.attr("id") + "-slideshow"; 49 50 return this.each(function() { 51 52 // ============== 53 // ! SETUP 54 // ============== 55 // Global Variables 56 var activeSlide = 0, 57 activeSlideContinous = 0, 58 numberSlides = 0, 59 frsWidth, 60 frsHeight, 61 locked, 62 caption_position, 63 timeout; 64 65 // Initialize 66 var slideWrapper = $(this).children('.frs-slide-img-wrapper').addClass('frs-slide-img-wrapper'); 67 var frs = slideWrapper.wrap('<div class="frs-slideshow-content" />').parent(); 68 var frsWrapper = frs.wrap('<div id="' + $(this).attr("id") + '-slideshow" class="frs-wrapper ' + options.skinClass.toLowerCase() + '" />').parent(); 69 var first_run = true 70 var old_responsive_class = 'responsive-full' 71 var responsiveClassLock = false 72 73 //Lock slider before all content loaded 74 frs_slider_lock(); 75 76 // Initialize and show slider after all content loaded 77 var imgWidth = [], 78 imgHeight = [], 79 imgCount = 0; 80 81 $(slideWrapper.children()).imagesLoadedFRS() 82 .progress( function( instance, image ) { 83 // collecting slide img original size 84 if($(image.img).parent().attr('class') == 'frs-slide-img') 85 { 86 imgWidth[imgCount] = image.img.width; 87 imgHeight[imgCount] = image.img.height; 88 89 imgCount++; 90 } 91 }) 92 .always( function( instance ) { 93 94 $(window).trigger('resize.frs-slideshow-container', true); 95 96 slideWrapper.fadeIn(function(){ 97 $(this).css({"display": "block"}); 98 }) 99 100 slideWrapper.children().fadeIn(function(){ 101 $(this).css({"display": "block"}); 102 }) 103 104 frsWrapper.children('.frs-slideshow-content').fadeIn(function(){ 105 $(this).css({"display": "block"}); 106 }) 107 108 frsWrapper.children('.frs-timer').fadeIn(function(){ 109 $(this).css({"display": "block"}); 110 }) 111 112 frsWrapper.children('.frs-slider-nav').fadeIn(function(){ 113 $(this).css({"display": "block"}); 114 }) 115 116 frsWrapper.children('.frs-bullets-wrapper').fadeIn(function(){ 117 $(this).css({"display": "block"}); 118 119 //unlock event in last displayed element 120 // if(options.timer) frs_slider_unlock(); 121 frs_slider_unlock(); 122 123 // hide the loader image 124 frsWrapper.children('.frs-slideshow-content').css('background-image','none'); 125 }) 126 }) 127 128 129 frs.css({ 130 'height': options.height, 131 'max-width': options.width 132 }); 133 134 frsWrapper.parent().css({ 135 'height': options.height, 136 'max-width': options.width 137 }); 138 139 // Full width 140 if(options.fullWidth == true) 141 { 142 frs.css({ 143 'max-width': '100%' 144 }); 145 146 frsWrapper.parent().css({ 147 'max-width': '100%' 148 }); 149 } 150 151 152 frs.add(frsWidth) 153 154 // Collect all slides and set slider size of largest image 155 var slides = slideWrapper.children('div'); 156 157 // Count slide 158 slides.each(function(index,slide) { 159 160 numberSlides++; 161 }); 162 163 // Animation locking functions 164 function frs_slider_unlock() { 165 locked = false; 166 } 167 168 function frs_slider_lock() { 169 locked = true; 170 } 171 172 // If there is only a single slide remove nav, timer and bullets 173 if (slides.length == 1) { 174 options.directionalNav = false; 175 options.timer = false; 176 options.bullets = false; 177 } 178 179 // Set initial front photo z-index and fades it in 180 if(options.continousSliding) 181 { 182 slides.eq(activeSlide) 183 .css({ 184 "z-index": 3, 185 "display": "block", 186 "left": 0 187 }) 188 .fadeIn(function() { 189 //brings in all other slides IF css declares a display: none 190 slides.css({ 191 "display": "block" 192 }) 193 }); 194 } 195 196 197 198 // ==================== 199 // ! CALCULATE SIZE 200 // ==================== 201 function calculateHeightWidth() 202 { 203 frsWidth = frs.innerWidth(); 204 205 var minus_resize = options.width - frsWidth;
206 var percent_minus = (minus_resize / options.width) * 100; 207 frsHeight = options.height - (options.height * percent_minus / 100); 208 209 // max and min height 210 if(frsHeight <= options.minHeight) 211 { 212 frsHeight = options.minHeight; 213 } 214 else if(frsHeight >= options.maxHeight && options.maxHeight > 0) 215 { 216 frsHeight = options.maxHeight; 217 } 218 219 applyImageSize() // apply image size 220 } 221 222 223 224 // ==================== 225 // ! APPLY IMAGE SIZE 226 // ==================== 227 function applyImageSize() 228 { 229 var images = slideWrapper.find('.frs-slide-img').children('img'); 230 231 $.each(images,function(index){ 232 var width = frsWidth; 233 var height = getImgHeight(width,index); 234 235 if(frsHeight > height) 236 { 237 var curImgWidth = getImgWidth(frsHeight,index); 238 var curDiffWidth = (curImgWidth - width) * -1; 239 240 $(this).css({ 241 'height': frsHeight + 'px', 242 'width': curImgWidth + 'px', 243 'max-height': frsHeight + 'px', 244 'max-width': curImgWidth + 'px', 245 'margin-left': curDiffWidth / 2 + 'px' 246 }) 247 248 // neutralize 249 $(this).css({ 250 'margin-top': '' 251 }) 252 } 253 else 254 { 255 var diff = frsHeight - height; 256 257 $(this).css('margin-top', (diff / 2) + 'px'); 258 259 $(this).css({ 260 'width': width + 'px', 261 'max-width': width + 'px' 262 }) 263 264 // neutralize 265 $(this).css({ 266 'height': 'auto', 267 'max-height':'none', 268 'margin-left': '' 269 }) 270 } 271 272 // width 273 $(this).parent().width(width); 274 }); 275 } 276 277 /** 278 * Function: getImgHeight 279 */ 280 getImgHeight = function(width,index) 281 { 282 var Twidth = imgWidth[index]; 283 var Theight = imgHeight[index]; 284 285 var minusResize = Twidth - width; 286 var percentMinus = (minusResize / Twidth) * 100; 287 var height = Theight - (Theight * percentMinus / 100); 288 height = Math.round(height); 289 290 return height 291 } 292 293 /** 294 * Function: getImgWidth 295 */ 296 getImgWidth = function(height,index) 297 { 298 var Twidth = imgWidth[index]; 299 var Theight = imgHeight[index]; 300 301 var minusResize = Theight - height; 302 var percentMinus = (minusResize / Theight) * 100; 303 var width = Twidth - (Twidth * percentMinus / 100); 304 width = Math.round(width); 305 306 return width; 307 } 308 309 310 311 // ======================== 312 // ! CHECK AND APPLY CSS 3 313 // ======================== 314 var vendorPrefix; 315 316 function css3support() { 317 var element = document.createElement('div'), 318 props = [ 'perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective' ]; 319 for ( var i in props ) { 320 if ( typeof element.style[ props[ i ] ] !== 'undefined' ) { 321 vendorPrefix = props[i].replace('Perspective', '').toLowerCase(); 322 return options.jsOnly ? false : true; 323 } 324 } 325 326 return false; 327 }; 328 329 330 331 // ================ 332 // ! SETUP LAYOUT 333 // ================ 334 var grouped_slideshow = ""; 335 336 if(! options.continousSliding) 337 { 338 if(options.animation == "horizontal-slide") 339 { 340 slides.css({ 341 "position": "relative", 342 "float": "left", 343 "display": "block", 344 "width": frsWidth + "px", 345 "height": + "100%" 346 }); 347 348 slides.parent().css({"width": frsWidth * numberSlides + "px", "height": frsHeight + "px"}); 349 } 350 else if(options.animation == "vertical-slide") 351 { 352 slides.parent().css({"width": frsWidth + "px", "height": frsHeight * numberSlides + "px"}); 353 354 slides.css({ 355 "position": "relative", 356 "display": "block", 357 "width": frsWidth + "px", 358 "height": frsHeight + "px" 359 }); 360 } 361 else if(options.animation == "fade") 362 { 363 slides.parent().css({"width": frsWidth + "px", "height": frsHeight + "px"}); 364 365 slides.css({ 366 "z-index": 1, 367 "width": frsWidth + "px", 368 "height": frsHeight + "px" 369 }); 370 371 slides.eq(activeSlide).css({"z-index": 3}); 372 } 373 } 374 375 376 377 // ============== 378 // ! TIMER 379 // ============== 380 date = new Date(); 381 milliseconds = date.getTime(); 382 start_seconds = milliseconds / 1000; 383 384 function log_time() { 385 date = new Date(); 386 milliseconds = date.getTime(); 387 seconds = milliseconds / 1000; 388 seconds = seconds - start_seconds; 389 } 390 391 //Timer Execution 392 function startCfrs_slider_lock() { 393 394 if (!options.timer || options.timer == 'false') { 395 return false; 396 397 /** 398 * Because in startup timer is always hidden 399 * use this if you want to change the behaviour 400 * 401 * } else if (timer.is(':hidden')) { 402 * timerRunning = true; 403 * clock = setInterval(function(e) { 404 * 405 * shift("next"); 406 * 407 * }, options.advanceSpeed); 408 * 409 */ 410 411 }
411 else if(! css3support()) { 412 timerRunning = true; 413 pause.removeClass('frs-timer-active') 414 clock = setInterval(function(e) { 415 416 shift("next"); 417 418 }, options.advanceSpeed); 419 } else { 420 timerRunning = true; 421 pause.removeClass('frs-timer-active') 422 clock = setInterval(function(e) { 423 424 var degreeCSS = "rotate(" + degrees + "deg)" 425 rotator.css('-' + vendorPrefix + '-transform', degreeCSS); 426 degrees += 1 427 if (degrees >= 180) { 428 429 mask.addClass('frs-timer-move') 430 rotator.addClass('frs-timer-move') 431 mask_turn.css("display", "block") 432 433 } 434 if (degrees >= 360) { 435 436 degrees = 0; 437 mask.removeClass('frs-timer-move') 438 rotator.removeClass('frs-timer-move') 439 mask_turn.css("display", "none") 440 441 shift("next"); 442 } 443 }, options.advanceSpeed / 360); 444 } 445 } 446 447 function stop_slider_lock() { 448 if (!options.timer || options.timer == 'false') { 449 return false; 450 } else { 451 timerRunning = false; 452 clearInterval(clock); 453 pause.addClass('frs-timer-active'); 454 } 455 } 456 457 458 // Timer Setup 459 if (options.timer) { 460 var timerHTML = '<div class="frs-timer"><span class="frs-timer-mask"><span class="frs-timer-rotator"></span></span><span class="frs-timer-mask-turn"></span><span class="frs-timer-pause"></span></div>' 461 frsWrapper.append(timerHTML); 462 var timer = frsWrapper.children('div.frs-timer'), 463 timerRunning; 464 if (timer.length != 0) { 465 var rotator = $(frs_id + ' div.frs-timer span.frs-timer-rotator'), 466 mask = $(frs_id + ' div.frs-timer span.frs-timer-mask'), 467 mask_turn = $(frs_id + ' div.frs-timer span.frs-timer-mask-turn'), 468 pause = $(frs_id + ' div.frs-timer span.frs-timer-pause'), 469 degrees = 0, 470 clock; 471 startCfrs_slider_lock(); 472 timer.click(function() { 473 if (!timerRunning) { 474 startCfrs_slider_lock(); 475 } else { 476 stop_slider_lock(); 477 } 478 }); 479 if (options.startClockOnMouseOut) { 480 var outTimer; 481 frsWrapper.mouseleave(function() { 482 483 outTimer = setTimeout(function() { 484 if (!timerRunning) { 485 startCfrs_slider_lock(); 486 } 487 }, options.startClockOnMouseOutAfter) 488 }) 489 frsWrapper.mouseenter(function() { 490 clearTimeout(outTimer); 491 }) 492 } 493 } 494 } 495 496 // Pause Timer on hover 497 if (options.pauseOnHover) { 498 frsWrapper.mouseenter(function() { 499 500 stop_slider_lock(); 501 }); 502 } 503 504 505 506 // ================== 507 // ! DIRECTIONAL NAV 508 // ================== 509 // DirectionalNav { rightButton --> shift("next"), leftButton --> shift("prev"); 510 if (options.directionalNav) { 511 if (options.directionalNav == "false") { 512 return false; 513 } 514 var directionalNavHTML = '<div class="frs-slider-nav ' + caption_position + '"><span class="frs-arrow-right">›</span><span class="frs-arrow-left">‹</span></div>'; 515 frsWrapper.append(directionalNavHTML); 516 var leftBtn = frsWrapper.children('div.frs-slider-nav').children('span.frs-arrow-left'), 517 rightBtn = frsWrapper.children('div.frs-slider-nav').children('span.frs-arrow-right'); 518 leftBtn.click(function() { 519 stop_slider_lock(); 520 shift("prev"); 521 }); 522 rightBtn.click(function() { 523 stop_slider_lock(); 524 shift("next") 525 }); 526 } 527 528 if (options.navigationSmall) { 529 530 $(window).resize(function() { 531 if ($(window).width() < options.navigationSmallTreshold) { 532 frs.siblings("div.frs-slider-nav").addClass('small') 533 } else { 534 frs.siblings("div.frs-slider-nav").removeClass('small') 535 } 536 }); 537 538 if (frs.width() < options.navigationSmallTreshold) { 539 frs.siblings("div.frs-slider-nav").addClass('small') 540 } 541 } 542 543 544 545 // ================== 546 // ! BULLET NAV 547 // ================== 548 if (options.bullets) 549 { 550 var bulletHTML = '<ul class="frs-bullets"></ul>'; 551 552 if(options.sbullets) 553 { 554 bulletHTML = '<ul class="frs-bullets frs-sbullets"></ul>'; 555 } 556 557 var bulletHTMLWrapper = "<div class='frs-bullet-wrapper'></div>"; 558 frsWrapper.append(bulletHTML); 559 560 var bullets = frsWrapper.children('ul.frs-bullets'); 561 for (i = 0; i < numberSlides; i++) { 562 var liMarkup = $('<li class="frs-slideshow-nav-bullets"></li>'); // If you want default numbering, add: (i + 1) 563 if (options.bulletThumbs) { 564 var thumbName = slides.eq(i).data('thumb'); 565 if (thumbName) { 566 var liMarkup = $('<li class="has-thumb">' + i + '</li>') 567 liMarkup.css({ 568 "background": "url(" + options.bulletThumbLocation + thumb
568Name + ") no-repeat" 569 }); 570 } 571 } 572 frsWrapper.children('ul.frs-bullets').append(liMarkup); 573 liMarkup.data('index', i); 574 liMarkup.click(function() { 575 stop_slider_lock(); 576 shift($(this).data('index')); 577 }); 578 } 579 580 bullets.wrap("<div class='frs-bullets-wrapper " + caption_position + "' />") 581 setActiveBullet(); 582 } 583 584 585 586 /** 587 * SLIDING BULLETS 588 */ 589 var sbullets = 0; 590 var bulletsWalkingWidth = 0; 591 var bulletsMaxShowedIndex = 0; 592 var bulletsBackChild = 0; 593 var bulletsNextChild = 0; 594 var bulletsOffsetWidth = 0; 595 var bulletsPosition = 0; 596 var bulletsOffsetEnable = false; 597 var bulletsWidth = 0; 598 var bulletsMovedWidth = 0; 599 600 var each_width = options.sbulletsItemWidth; 601 var total_width = each_width * numberSlides; 602 603 /** 604 * generate slide bullet 605 * this function will be recall every slideshow resized 606 */ 607 function generate_slide_bullet() 608 { 609 sbullets = frsWrapper.find('ul.frs-sbullets'); 610 611 bulletsWalkingWidth = 0; 612 bulletsMaxShowedIndex = 0; 613 bulletsBackChild = 0; 614 bulletsNextChild = 0; 615 bulletsOffsetWidth = 0; 616 bulletsPosition = 0; 617 bulletsOffsetEnable = false; 618 bulletsWidth = sbullets.parent().outerWidth(true); 619 620 if(bulletsWidth > total_width) 621 { 622 each_width = bulletsWidth / numberSlides; 623 total_width = each_width * numberSlides; 624 } 625 626 sbullets.parent().css('overflow', 'hidden'); 627 sbullets.css('background-color', sbullets.children('li').last().css("background-color")); 628 sbullets.children('li.frs-slideshow-nav-bullets').css('width',each_width + 'px'); 629 sbullets.css('width', total_width + 'px'); 630 631 sbullets.find('li').each(function() { 632 bulletsWalkingWidth += each_width; 633 634 if (bulletsWalkingWidth + each_width > bulletsWidth) 635 { 636 bulletsNextChild = $(this).index(); 637 bulletsMaxShowedIndex = bulletsNextChild; 638 } 639 640 if (bulletsWalkingWidth > bulletsWidth) 641 { 642 $(this).addClass('frs-bullet-sliding-next'); 643 bulletsOffsetWidth = bulletsWalkingWidth - bulletsWidth; 644 645 /* detect if bullets offset is too large */ 646 if(bulletsOffsetWidth < each_width) 647 { 648 bulletsOffsetEnable = true; 649 } 650 651 return false; 652 } 653 }); 654 } 655 656 function slide_bullet(navigate) 657 { 658 if(navigate == 'next') 659 { 660 if(sbullets.children('li').eq(numberSlides - 1).hasClass("frs-bullet-sliding-next")) 661 { 662 bulletsNavPixelWidth = (each_width * bulletsPosition) + bulletsOffsetWidth; 663 } 664 else 665 { 666 sbullets.children('li').removeClass('frs-bullet-sliding-back').removeClass('frs-bullet-sliding-next'); 667 668 bulletsPosition++; 669 bulletsBackChild++; 670 bulletsNextChild++; 671 672 bulletsNavPixelWidth = (each_width * bulletsPosition) + bulletsOffsetWidth; 673 } 674 675 slide_bullet_add_class('sliding_one','frs-bullet-sliding-one-back',bulletsBackChild + 1) 676 } 677 else if(navigate == 'back') 678 { 679 sbullets.children('li').removeClass('frs-bullet-sliding-back').removeClass('frs-bullet-sliding-next'); 680 681 bulletsPosition--; 682 bulletsBackChild--; 683 bulletsNextChild--; 684 685 bulletsNavPixelWidth = each_width * bulletsPosition; 686 687 slide_bullet_add_class('sliding_one','frs-bullet-sliding-one-next',bulletsNextChild - 1) 688 } 689 else if(navigate == 'first') 690 { 691 sbullets.children('li').removeClass('frs-bullet-sliding-back').removeClass('frs-bullet-sliding-next'); 692 693 bulletsPosition = 0; 694 bulletsBackChild = 0; 695 bulletsNextChild = bulletsMaxShowedIndex; 696 697 bulletsNavPixelWidth = each_width * bulletsPosition; 698 699 slide_bullet_add_class('sliding_one','frs-bullet-sliding-one-next',bulletsNextChild - 1) 700 } 701 else if(navigate == 'last') 702 { 703 sbullets.children('li').removeClass('frs-bullet-sliding-back').removeClass('frs-bullet-sliding-next'); 704 705 var numberBulletsByIndex = numberSlides - 1; 706 707 bulletsPosition = numberBulletsByIndex - bulletsMaxShowedIndex; 708 bulletsBackChild = numberBulletsByIndex - bulletsMaxShowedIndex; 709 bulletsNextChild = numberBulletsByIndex; 710 711 bulletsNavPixelWidth = (each_width * bulletsPosition) + bulletsOffsetWidth; 712 713 slide_bullet_add_class('sliding_one','frs-bullet-sliding-one-back',bulletsBackChild + 1) 714 } 715 716 /** 717 * Track moved width 718 */ 719 bulletsMovedWidth = bulletsNavPixelWidth; 720
721 if(css3support()) 722 { 723 var properties = {}; 724 properties[ '-' + vendorPrefix + '-transition-duration' ] = options.animationSpeed + 'ms'; 725 properties[ '-' + vendorPrefix + '-transform' ] = 'translate3d(-' + bulletsNavPixelWidth + 'px, 0, 0)'; 726 727 sbullets.css(properties); 728 } 729 else 730 { 731 sbullets 732 .animate({ 733 "left": '-' + bulletsNavPixelWidth + 'px' 734 }, options.animationSpeed); 735 } 736 737 // Apply class to bullet 738 slide_bullet_add_class('sliding', 'frs-bullet-sliding-back', bulletsBackChild) 739 slide_bullet_add_class('sliding', 'frs-bullet-sliding-next', bulletsNextChild) 740 } 741 742 function slide_bullet_add_class(li_type, li_class, li_index) 743 { 744 if(li_type == 'sliding_one') 745 { 746 if(bulletsOffsetEnable == true) 747 { 748 sbullets.children('li').removeClass('frs-bullet-sliding-one-back').removeClass('frs-bullet-sliding-one-next'); 749 750 var addClassTo = sbullets.children('li').eq(li_index) 751 752 if(addClassTo.attr('class') == "frs-slideshow-nav-bullets") 753 { 754 addClassTo.addClass(li_class); 755 } 756 } 757 } 758 else if(li_type == 'sliding') 759 { 760 if(sbullets.children('li').eq(li_index).attr('class') == 'frs-slideshow-nav-bullets frs-bullets-active' && li_index > 0 ) 761 { 762 if(li_class == 'frs-bullet-sliding-back') 763 { 764 li_index-- 765 } 766 else if(li_class == 'frs-bullet-sliding-next') 767 { 768 li_index++ 769 } 770 } 771 772 sbullets.children('li').eq(li_index).removeClass('frs-bullet-sliding-one-back') 773 sbullets.children('li').eq(li_index).removeClass('frs-bullet-sliding-one-next') 774 sbullets.children('li').eq(li_index).addClass(li_class) 775 } 776 } 777 778 function slide_bullet_one(type) 779 { 780 var oneMove = 0; 781 782 sbullets.children('li').removeClass('frs-bullet-sliding-one-back').removeClass('frs-bullet-sliding-one-next'); 783 784 if(type == 'back') 785 { 786 sbullets.children('li').eq(bulletsNextChild - 1).addClass('frs-bullet-sliding-one-next'); 787 788 oneMove = bulletsMovedWidth - bulletsOffsetWidth; 789 } 790 else 791 { 792 sbullets.children('li').eq(bulletsBackChild + 1).addClass('frs-bullet-sliding-one-back'); 793 794 oneMove = bulletsMovedWidth + bulletsOffsetWidth; 795 } 796 797 /** 798 * Track moved width 799 */ 800 bulletsMovedWidth = oneMove; 801
802 if(css3support()) 803 { 804 var properties = {}; 805 properties[ '-' + vendorPrefix + '-transition-duration' ] = options.animationSpeed + 'ms'; 806 properties[ '-' + vendorPrefix + '-transform' ] = 'translate3d(-' + oneMove + 'px, 0, 0)'; 807 808 sbullets.css(properties); 809 } 810 else 811 { 812 sbullets 813 .animate({ 814 "left": '-' + oneMove + 'px' 815 }, options.animationSpeed); 816 } 817 } 818 819 820 /** 821 * SET ACTIVE BULLETS 822 */ 823 function setActiveBullet() { 824 if (!options.bullets) { 825 return false; 826 } else { 827 bullets.children('li').removeClass('frs-bullets-active').eq(activeSlide).addClass('frs-bullets-active'); 828 829 /** 830 * begin slide bullets 831 */ 832 if(options.sbullets) 833 { 834 if(bullets.children('li.frs-bullets-active').hasClass('frs-bullet-sliding-next')) 835 { 836 if(bullets.children('li.frs-bullets-active').index() == (numberSlides-1)) 837 { 838 slide_bullet('last'); 839 } 840 else 841 { 842 slide_bullet('next'); 843 } 844 } 845 else if(bullets.children('li.frs-bullets-active').hasClass('frs-bullet-sliding-back')) 846 { 847 if(bullets.children('li.frs-bullets-active').index() > 0) 848 { 849 slide_bullet('back'); 850 } 851 else 852 { 853 slide_bullet('first'); 854 } 855 } 856 else if(bullets.children('li.frs-bullets-active').hasClass('frs-bullet-sliding-one-next')) 857 { 858 slide_bullet_one('next') 859 } 860 else if(bullets.children('li.frs-bullets-active').hasClass('frs-bullet-sliding-one-back')) 861 { 862 slide_bullet_one('back') 863 } 864 else 865 { 866 if(bulletsMaxShowedIndex > 0) 867 { 868 if(bullets.children('li.frs-bullets-active').index() == 0) 869 { 870 slide_bullet('first'); 871 } 872 else if(bullets.children('li.frs-bullets-active').index() == (numberSlides-1)) 873 { 874 slide_bullet('last'); 875 } 876 } 877 } 878 } 879 } 880 } 881 882 883 // ==================== 884 // ! CAPTION POSITION 885 // ==================== 886 function set_caption_position() 887 { 888 caption_position = slides.eq(activeSlide).find('div.frs-caption'); 889 890 if(caption_position.length) 891 { 892 caption_position = caption_position.attr('class').replace('frs-caption ',''); 893 } 894 else 895 { 896 caption_position = "undefined"; 897 } 898 899 //set active caption position to bullet and navigation 900 frsWrapper.find('div.frs-bullets-wrapper').attr('class', 'frs-bullets-wrapper ' + caption_position); 901 frsWrapper.find('div.frs-slider-nav').attr('class', 'frs-slider-nav ' + caption_position); 902 } 903 904 905 // ==================== 906 // ! SHIFT ANIMATIONS 907 // ==================== 908 function shift(direction) 909 { 910 // remember previous activeSlide 911 var prevActiveSlide = activeSlide, 912 slideDirection = direction; 913 // exit function if bullet clicked is same as the current image 914 if (prevActiveSlide == slideDirection) { 915 return false; 916 } 917 // reset Z & Unlock 918 function resetAndUnlock() { 919 if(options.continousSliding) 920 { 921 slides 922 .eq(prevActiveSlide) 923 .css({ 924 "z-index": 1 925 }); 926 } 927 928 frs_slider_unlock(); 929 options.afterSlideChange.call(this); 930 } 931 932 if (slides.length == "1") { 933 return false; 934 } 935 if (!locked) { 936 frs_slider_lock(); 937 //deduce the proper activeImage 938 if (direction == "next") { 939 activeSlide++ 940 activeSlideContinous++ 941 if (activeSlide == numberSlides) { 942 activeSlide = 0; 943 } 944 } else if (direction == "prev") { 945 activeSlide-- 946 activeSlideContinous--
947 if (activeSlide < 0) { 948 activeSlide = numberSlides - 1; 949 } 950 } else { 951 activeSlide = direction; 952 if (prevActiveSlide < activeSlide) { 953 slideDirection = "next"; 954 } else if (prevActiveSlide > activeSlide) { 955 slideDirection = "prev" 956 } 957 } 958 // set to correct bullet 959 setActiveBullet(); 960 961 // set previous slide z-index to one below what new activeSlide will be 962 if(options.continousSliding) 963 { 964 slides 965 .eq(prevActiveSlide) 966 .css({ 967 "z-index": 2 968 }); 969 } 970 971 972 if(options.heightResize==true){ 973 974 $(slides).parent('.frs-slideshow-content').animate( 975 {'height':frsHeight}, 976 options.animationSpeed) 977 } 978 979 980 /** 981 * Horizontal Slide 982 */ 983 if (options.animation == "horizontal-slide") 984 { 985 if(options.continousSliding) 986 { 987 var cssWidth = slideDirection == "next" ? frsWidth : -frsWidth; 988 var aniWidth = slideDirection == "next" ? -frsWidth : frsWidth; 989
990 if(css3support()) 991 { 992 /** 993 * belum jadi yang css 3 continous slide 994 */ 995 996 slides 997 .eq(activeSlide) 998 .css({ 999 "left": cssWidth, 1000 "z-index": 3 1001 }) 1002 .animate({ 1003 "left": 0 1004 1005 }, options.animationSpeed, resetAndUnlock); 1006 1007 slides 1008 .eq(prevActiveSlide) 1009 .animate({ 1010 "left": aniWidth 1011 }, options.animationSpeed); 1012 1013 1014 // var properties = {};
1015 // properties[ 'z-index' ] = 3; 1016 // properties[ 'left' ] = cssWidth; 1017 1018 // slides.eq(activeSlide).css(properties); 1019 1020 // var properties = {}; 1021 // properties[ 'left' ] = 0; 1022 1023 // slides.eq(prevActiveSlide).css(properties); 1024 1025 // if(slides.eq(activeSlide).css('left') == cssWidth + 'px') 1026 // { 1027 // var properties = {}; 1028 // properties[ '-' + vendorPrefix + '-transition-duration' ] = options.animationSpeed + 'ms'; 1029 // properties[ '-' + vendorPrefix + '-transform' ] = 'translate3d(-'+ cssWidth +'px, 0, 0)'; 1030 1031 // slides.eq(activeSlide).css(properties); 1032 1033 // var properties = {}; 1034 // properties[ 'left' ] = 0; 1035 // properties[ '-' + vendorPrefix + '-transition-duration' ] = options.animationSpeed + 'ms'; 1036 // properties[ '-' + vendorPrefix + '-transform' ] = 'translate3d('+ aniWidth +'px, 0, 0)'; 1037 1038 // slides.eq(prevActiveSlide).css(properties); 1039 1040 // resetAndUnlock(); 1041 // } 1042 } 1043 else 1044 { 1045 slides 1046 .eq(activeSlide) 1047 .css({ 1048 "left": cssWidth, 1049 "z-index": 3 1050 }) 1051 .animate({ 1052 "left": 0 1053 1054 }, options.animationSpeed, resetAndUnlock); 1055 1056 slides 1057 .eq(prevActiveSlide) 1058 .animate({ 1059 "left": aniWidth 1060 }, options.animationSpeed); 1061 } 1062 } 1063 else 1064 { 1065 var slide_action = frsWidth * activeSlide < numberSlides * frsWidth ? '-' + frsWidth * activeSlide : 0 ; 1066
1067 if(css3support()) 1068 { 1069 // Get the properties to transition 1070 var properties = {}; 1071 properties[ '-' + vendorPrefix + '-transition-duration' ] = options.animationSpeed + 'ms'; 1072 properties[ '-' + vendorPrefix + '-transform' ] = 'translate3d('+ slide_action +'px, 0, 0)'; 1073 1074 // Do the CSS3 transition 1075 slides.parent().css(properties); 1076 resetAndUnlock(); 1077 } 1078 else 1079 { 1080 slides.parent() 1081 .animate({ 1082 "left": slide_action + 'px' 1083 }, options.animationSpeed, resetAndUnlock); 1084 } 1085 } 1086 } 1087 1088 /** 1089 * Vertical Slide 1090 */ 1091 if (options.animation == "vertical-slide") 1092 { 1093 var slide_action = frsHeight * activeSlide < numberSlides * frsHeight ? '-' + frsHeight * activeSlide : 0 ; 1094 1095 if(options.continousSliding) 1096 { 1097 /** 1098 * BELUM JADI 1099 */ 1100 if (slideDirection == "prev") {
1101 if(css3support()) 1102 { 1103 // Get the properties to transition 1104 var properties = {}; 1105 properties[ '-' + vendorPrefix + '-transition-duration' ] = options.animationSpeed + 'ms'; 1106 properties[ '-' + vendorPrefix + '-transform' ] = 'translate3d(0, '+ slide_action +'px, 0)'; 1107 1108 // Do the CSS3 transition 1109 slides.parent().css(properties); 1110 resetAndUnlock(); 1111 } 1112 else 1113 { 1114 slides 1115 .eq(activeSlide) 1116 .css({ 1117 "top": frsHeight, 1118 "z-index": 3 1119 }) 1120 .animate({ 1121 "top": 0 1122 }, options.animationSpeed, resetAndUnlock); 1123 } 1124 } 1125 if (slideDirection == "next") {
1126 if(css3support()) 1127 { 1128 // Get the properties to transition 1129 var properties = {}; 1130 properties[ '-' + vendorPrefix + '-transition-duration' ] = options.animationSpeed + 'ms'; 1131 properties[ '-' + vendorPrefix + '-transform' ] = 'translate3d(0, '+ slide_action +'px, 0)'; 1132 1133 // Do the CSS3 transition 1134 slides.parent().css(properties); 1135 resetAndUnlock(); 1136 } 1137 else 1138 { 1139 slides 1140 .eq(activeSlide) 1141 .css({ 1142 "top": -frsHeight, 1143 "z-index": 3 1144 }) 1145 .animate({ 1146 "top": 0 1147 }, options.animationSpeed, resetAndUnlock); 1148 } 1149 } 1150 } 1151 else 1152 {
1153 if(css3support()) 1154 { 1155 // Get the properties to transition 1156 var properties = {}; 1157 properties[ '-' + vendorPrefix + '-transition-duration' ] = options.animationSpeed + 'ms'; 1158 properties[ '-' + vendorPrefix + '-transform' ] = 'translate3d(0, '+ slide_action +'px, 0)'; 1159 1160 // Do the CSS3 transition 1161 slides.parent().css(properties); 1162 resetAndUnlock(); 1163 } 1164 else 1165 { 1166 slides.parent() 1167 .animate({ 1168 "top": slide_action + 'px' 1169 }, options.animationSpeed, resetAndUnlock); 1170 } 1171 } 1172 1173 } 1174 1175 /** 1176 * Fade 1177 */ 1178 if (options.animation == "fade") 1179 {
1180 if(css3support()) 1181 { 1182 slides.eq(activeSlide).css({'z-index': 2}); 1183 1184 // Get the properties to transition 1185 var properties = {}; 1186 properties[ 'opacity' ] = 0; 1187 properties[ '-' + vendorPrefix + '-transition' ] = 'all ' + options.animationSpeed + 'ms ease'; 1188 1189 slides.eq(prevActiveSlide).css(properties); 1190 1191 clearTimeout(timeout); 1192 timeout = setTimeout(function() { 1193 slides.eq(activeSlide).css({'z-index': 3}); 1194 1195 // Get the properties to transition 1196 var properties = {}; 1197 properties[ 'opacity' ] = 1; 1198 properties[ 'z-index' ] = 1; 1199 properties[ '-' + vendorPrefix + '-transition' ] = ''; 1200 1201 slides.eq(prevActiveSlide).css(properties); 1202 }, options.animationSpeed - (options.animationSpeed * 20 / 100)); 1203 1204 resetAndUnlock(); 1205 } 1206 else 1207 { 1208 slides 1209 .eq(activeSlide) 1210 .css({ 1211 "opacity": 0, 1212 "z-index": 3 1213 }) 1214 .animate({ 1215 "opacity": 1, 1216 }, options.animationSpeed, resetAndUnlock); 1217 } 1218 } 1219 1220 set_caption_position(); 1221 } //lock 1222 } //frs function 1223 1224 // set caption position 1225 set_caption_position(); 1226 1227 1228 1229 // ==================================== 1230 // ! RESIZE WINDOWS EVENT: RESPONSIVE 1231 // ==================================== 1232 $(window).bind('resize.frs-slideshow-container', function(event, force) { 1233 calculateHeightWidth(); 1234 1235 /** 1236 * resize elements 1237 */ 1238 slides.width(frsWidth); 1239 slides.height(frsHeight); 1240 1241 // resize wrapper 1242 frs.css({'height': frsHeight + 'px'}); 1243 frsWrapper.parent().css({'height': frsHeight + 'px'}); 1244 1245 if(! options.continousSliding) 1246 { 1247 if(options.animation == "horizontal-slide") 1248 { 1249 slideWrapper.css({ 1250 'width': frsWidth * numberSlides + 'px' 1251 }); 1252 1253 var slide_action = frsWidth * activeSlide < numberSlides * frsWidth ? '-' + frsWidth * activeSlide : 0 ; 1254 1255 // Stabilize slide position
1256 if(css3support()) 1257 { 1258 var properties = {}; 1259 properties[ '-' + vendorPrefix + '-transform' ] = 'translate3d('+ slide_action +'px, 0, 0)'; 1260 1261 slides.parent().css(properties); 1262 } 1263 else 1264 { 1265 slides.parent() 1266 .animate({ 1267 "left": slide_action + 'px' 1268 }); 1269 } 1270 1271 } 1272 else if(options.animation == "vertical-slide") 1273 { 1274 slideWrapper.css({ 1275 'height': frsHeight * numberSlides + 'px' 1276 }); 1277 1278 var slide_action = frsHeight * activeSlide < numberSlides * frsHeight ? '-' + frsHeight * activeSlide : 0 ; 1279 1280 /** Stabilize slide position */ 1281 var properties = {}; 1282 properties[ '-' + vendorPrefix + '-transform' ] = 'translate3d(0, '+ slide_action +'px, 0)'; 1283 1284 slides.parent().css(properties); 1285 } 1286 1287 /** 1288 * Slide bullets 1289 */ 1290 if(options.sbullets) 1291 { 1292 generate_slide_bullet(); 1293 slide_bullet('first'); 1294 shift(0); 1295 } 1296 } 1297 1298 1299 /** 1300 * Resposive Class 1301 * - frs-responsive-mobile-small (width <= 369) 1302 * - frs-responsive-mobile-medium (width <= 499 && width <= frsWidth) 1303 * - frs-responsive-full 1304 */ 1305 1306 if(370 <= frsWidth && frsWidth <= 499) { 1307 doResponsiveClassStart('frs-responsive-mobile-medium') 1308 } 1309 else if(369 >= frsWidth ) { 1310 doResponsiveClassStart('frs-responsive-mobile-small') 1311 } 1312 else { 1313 // Desktop Mode 1314 doResponsiveClassStart('frs-responsive-full') 1315 } 1316 }); 1317 1318 function doResponsiveClassStart(responsiveClass){ 1319 // if it is the first run dont do animation 1320 if(first_run) 1321 { 1322 first_run = false 1323 frsWrapper.attr('class','frs-wrapper ' + options.skinClass) 1324 frsWrapper.addClass(responsiveClass) 1325 return 1326 } 1327 1328 if(old_responsive_class == responsiveClass) return 1329 1330 old_responsive_class = responsiveClass 1331 1332 // Do the loading animation 1333 frsWrapper.children('.frs-slideshow-content').css('background-image',''); 1334 slideWrapper.hide() 1335 1336 // Restore & change responsive class 1337 setTimeout(function() { 1338 frsWrapper.attr('class','frs-wrapper ' + options.skinClass) 1339 frsWrapper.addClass(responsiveClass) 1340 slideWrapper.css('display','block') 1341 1342 frsWrapper.children('.frs-slideshow-content').css('background-image','none'); 1343 }, 1000); 1344 } 1345 1346 }); // Each call 1347 } // Frs plugin call 1348 1349})(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.