1/** 2 * Slider Kit v1.6 - Sliding contents with jQuery 3 * http://www.kyrielles.net/sliderkit 4 * 5 * Copyright (c) 2010-2011 Alan Frog 6 * Licensed under the GNU General Public License 7 * See <license.txt> or <http://www.gnu.org/licenses/> 8 * 9 * Requires: jQuery v1.3+ <http://jquery.com/> 10 * 11 * --------------------------------- 12 * This file is part of Slider Kit jQuery plugin. 13 * 14 * Slider Kit is free software: you can redistribute it and/or modify 15 * it under the terms of the GNU General Public License as published by 16 * the Free Software Foundation, either version 3 of the License, or 17 * (at your option) any later version. 18 * 19 * Slider Kit is distributed in the hope that it will be useful, 20 * but WITHOUT ANY WARRANTY; without even the implied warranty of 21 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 22 * GNU General Public License for more details. 23 * --------------------------------- 24 */ 25 26(function($){ 27 28 /** 29 * SliderKit object 30 * An object representing a slider in action. 31 */ 32 var SliderKit = function() { 33 34 var self = this; 35 36 this._init = function( element, options ) { 37 38 // Passed in options and default options are mixed 39 this.options = $.extend({}, this._settings, options); 40 41 // Save the element reference 42 this.domObj = $(element); // The main container DOM element 43 44 this.panels = $("."+this.options.cssprefix+"-panel", this.domObj); 45 this.nav = $("."+this.options.cssprefix+"-nav", this.domObj); 46 this.navClip = $("."+this.options.cssprefix+"-nav-clip", this.nav); 47 this.allItems = this.panels.size(); 48 49 // Check if there is any reason to go further 50 this.arePanels = this.allItems > 0 ? 1 : 0; 51 this.isNavClip = this.navClip.size() > 0 ? 1 : 0; 52 if(!this.arePanels && !this.isNavClip){ 53 this._errorReport("01", this.options.debug, 1); 54 } 55 56 // The function stops if there is no height value (unless 'freeheight' setting is true) 57 else if(this.domObj.css("height") == "auto" && !this.options.freeheight){ 58 this._errorReport("02", this.options.debug, 1); 59 } 60 61 // By default, the widget should be hidden via CSS. Then shown only if javascript is available : 62 this.domObj.css("display","block"); 63 64 // Variables that will be needed all over the script 65 this.currId = 0; 66 this.prevId = 0; 67 this.newId = 0; 68 this.currPanel = null; 69 this.prevPanel = 0; 70 this.firstTime = 1; 71 this.scrollActive = 0; 72 this.isPlaying = null; 73 this.changeOngoing = false; 74 75 // Variables for CSS 76 this.cssNames = { 77 cssSelected: this.options.cssprefix+"-selected", 78 cssActive: this.options.cssprefix+"-panel-active", 79 cssOld: this.options.cssprefix+"-panel-old", 80 cssBtnDisable:this.options.cssprefix+"-btn-disable", 81 cssPanelsWrapper:this.options.cssprefix+"-panels-wrapper", 82 cssBtnPause: this.options.cssprefix+"-pause-btn", 83 cssPosValue: "+" 84 }; 85 86 if(this.isNavClip){ 87 this._buildNav(); 88 } 89 90 this._buildControls(); 91 92 if(this.arePanels){ 93 this.panelsBag = $("."+this.options.cssprefix+"-panels", this.domObj); 94 // Panels wrapper : this is only for internal code usage 95 // It allows a nice sliding effect in the panels container 96 if(this.options.panelfx == "sliding"){ 97 this._wrapPanels(); 98 } 99 } 100 101 /*--------------------------------- 102 * Navigation settings 103 *---------------------------------*/ 104 105 // In carousel mode (no panels), mousewheel and autoscroll should move lines instead of thumbnails. This behaviour is also set for 'navpanelautoswitch' option. 106 this.lineScrollDo = !this.arePanels ? 1 : 0; 107 108 // Mousewheel navigation 109 if(this.options.mousewheel){ 110 this.domObj.mousewheel(function(event, delta){ 111 delta > 0 ? self.stepBackward() : self.stepForward(); 112 return false; 113 }); 114 } 115 116 // Keyboard navigation (beta) 117 if(this.options.keyboard){ 118 this.domObj.keyup(function(event){ 119 // slide left 120 if(event.keyCode == 37){ 121 self.stepBackward(); 122 } 123 // slide right 124 else if (event.keyCode == 39){ 125 self.stepForward(); 126 } 127 }); 128 } 129 130 // One-click navigation 131 if(this.options.panelclick && this.arePanels){ 132 this.panelsBag.click(function(){ 133 self.stepForward(); 134 return false;
135 }); 136 } 137 138 // Slide for the first time 139 this.changeWithId(this.options.start >= this.allItems ? this.allItems-1 : this.options.start < 0 ? 0 : this.options.start, null); 140 141 // Auto-scrolling starter 142 if(this.options.auto){ 143 this.autoScrollStart(); 144 145 // Stops autoScrolling when mouse is over the slider content 146 if(!this.isPlayBtn){ 147 this.domObj.hover( 148 function(){ 149 if(self.isPlaying!=null){ 150 self.autoScrollStop(); 151 } 152 }, 153 function(){ 154 self.autoScrollStart(); 155 } 156 ); 157 } 158 } 159 160 // return this so we can chain/use the bridge with less code. 161 return this; 162 }; 163 164 this._settings = { 165 cssprefix:"sliderkit", 166 start:0, 167 auto:true, 168 autospeed:4000, 169 mousewheel:false, 170 keyboard:false, 171 circular:false, 172 shownavitems:5, 173 navitemshover:false, 174 navclipcenter:false, 175 navcontinuous:false, 176 navscrollatend:false, 177 navpanelautoswitch:true, 178 navfx:"sliding", 179 scroll:null, 180 scrollspeed:600, 181 scrolleasing:null, 182 panelfx:"fading", 183 panelfxspeed:700, 184 panelfxeasing:null, 185 panelfxfirst:"none", 186 panelfxbefore:function(){}, 187 panelfxafter:function(){}, 188 panelbtnshover:false, 189 panelclick:false, 190 verticalnav:false, 191 verticalslide:false, 192 tabs:false, 193 freeheight:false, 194 fastchange:true, 195 debug:false 196 }; 197 198 this._errorReport = function( errorCode, debug, stop ){ 199 if(debug){ 200 alert("Slider Kit error! Code #"+errorCode+" (see doc)"); 201 } 202 if(stop){ 203 return false; 204 } 205 }; 206 207 this._buildNav = function() { 208 209 this.navUL = $("ul", this.navClip); 210 this.navLI = $("li", this.navUL); 211 var navLINum = this.navLI.size(); 212 213 // Check if nav size is equal to panels size (only if there are panels) 214 if(this.arePanels && (navLINum != this.allItems) && this.nav.size() == 1){ 215 this._errorReport("03", this.options.debug, 1); 216 } 217 218 // If Slider Kit is used as a tabs menu, the nav scroll becomes useless (well, for now...) 219 if(this.options.tabs){ 220 this.options.shownavitems = this.allItems; 221 } 222 223 // Else we start initializing the carousel 224 else{ 225 // LI margins function: returns the <li> tag margins value in pixels 226 function getLImargin(attr){ 227 attrVal = self.navLI.css(attr); 228 if(attrVal!="auto" && attr!="" && attr!="0px"){ 229 return parseInt(attrVal); 230 } 231 else return 0; 232 } 233 234 // Nav elements size 235 var navSize = this.options.verticalnav ? this.nav.height() : this.nav.width(); 236 var navLIWidth = this.navLI.outerWidth(true); // padding + margin + border 237 var navLIHeight = this.navLI.outerHeight(true); 238 var navLIextHMarg = getLImargin("margin-left") + getLImargin("margin-right"); 239 var navLIextVMarg = getLImargin("margin-top") + getLImargin("margin-bottom"); 240 241 this.navLIsize = this.options.verticalnav ? navLIHeight : navLIWidth; 242 this.navULSize = this.navLIsize * navLINum; 243 this.navClipSize = (this.options.shownavitems * this.navLIsize) - (this.options.verticalnav ? navLIextVMarg : navLIextHMarg);// Removes the item side margins to center the nav clip 244 245 // CSS attributes for position/height values 246 this.cssPosAttr = this.options.verticalnav ? "top" : "left"; 247 var cssSizeAttr = this.options.verticalnav ? "height" : "width"; 248 var cssSizeAttrr = this.options.verticalnav ? "width" : "height"; 249 250 // Setting height and width values(px) to Clip, UL & LI tags 251 this.navLI.css({width:this.navLI.width(), height:this.navLI.height()}); 252 this.navUL.css(cssSizeAttr, this.navULSize+"px"); 253 this.navClip.css({width:this.options.verticalnav ? navLIWidth : this.navClipSize, height:this.options.verticalnav ? this.navClipSize : navLIHeight}); 254 255 // Center the navclip in the nav container 256 if(this.options.navclipcenter){ 257 this.navClip.css(this.cssPosAttr,( navSize - this.navClipSize)/2 ).css("margin", "0"); 258 } 259 260 // Check if linescroll is necessary 261 this.allItems = navLINum; 262 263 // The nav scrolling is required only if the number of items is greater than the 'visible' param. 264 if(this.allItems > this.options.shownavitems){ 265 this.scrollActive = true; 266 267 // Correcting a potentially 'this.options.scroll' wrong value 268 if(this.options.scroll == null || this.options.scroll < 0 || this.options.scroll > this.allItems){ 269 this.options.scroll = this.options.shownavitems; 270 } 271 272 // Nav Buttons 273 this.navBtns = $("."+this.options.cssprefix+"-nav-btn", this.nav); 274 if(this.navBtns.size() > 0){ 275 this._buildNavButtons(); 276 } 277 } 278 } 279 280 // Nav <li> links mouse event 281 if(this.options.navitemshover && this.arePanels){ 282 this.navLI.mouseover(function(){ 283 self.changeWithId(getIndex(this, "li"), $(this)); 284 }); 285 } 286 else if(this.arePanels || this.options.navscrollatend){ 287 this.navLI.click(function(){ 288 self.changeWithId(getIndex(this, "li"), $(this)); 289 return false;
290 }); 291 } 292 293 // Get an item index 294 function getIndex(item, tag){ 295 return $(tag, $(item).parent()).index(item); 296 } 297 298 }; 299 300 this._buildNavButtons = function() { 301 302 this.scrollBtns = true; 303 this.navBtnPrev = $("."+this.options.cssprefix+"-nav-prev", this.nav); 304 this.navBtnNext = $("."+this.options.cssprefix+"-nav-next", this.nav); 305 306 // Nav Buttons click event 307 this.navBtnPrev.click(function(){ 308 self.navPrev(); 309 return false; 310 }); 311 this.navBtnNext.click(function(){ 312 self.navNext(); 313 return false; 314 }); 315 316 // Nav Buttons mousedown/up events 317 if(this.options.navcontinuous){ 318 this.navBtnPrev.mouseover(function(){ 319 self.navPrev(true); 320 }); 321 this.navBtnNext.mouseover(function(){ 322 self.navNext(true); 323 }); 324 this.navBtns.mouseout(function(){ 325 self.navStopContinuous(); 326 }); 327 } 328 329 // Disable first button if not circular 330 if(!this.options.circular){ 331 this.navBtnPrev.toggleClass(this.cssNames.cssBtnDisable); 332 } 333 334 }; 335 336 this._getNavPos = function() { 337 this.navPos = this.options.verticalnav ? this.navUL.position().top : this.navUL.position().left; 338 this.LIbefore = Math.ceil( Math.abs(this.navPos) / this.navLIsize ); 339 this.LIafter = Math.floor(( this.navULSize - Math.abs(this.navPos) - this.navClipSize) / this.navLIsize ); 340 if(this.LIafter < 0){ 341 this.LIafter = 0; 342 } 343 }; 344 345 this._buildControls = function() { 346 347 this.playBtn = $("."+this.options.cssprefix+"-play-btn", this.domObj); 348 this.gBtns = $("."+this.options.cssprefix+"-go-btn", this.domObj); 349 350 this.isPlayBtn = this.playBtn.size() > 0 ? 1 : 0; 351 this.goBtns = this.gBtns.size() > 0 ? 1 : 0; 352 353 // Play button 354 if(this.isPlayBtn){ 355 356 // If autoscroll is active, the play button is set to 'pause' mode 357 if(this.options.auto){ 358 this.playBtn.addClass(this.cssNames.cssBtnPause); 359 } 360 361 // Button mouse event 362 this.playBtn.click(function(){ 363 if(self.playBtn.hasClass(self.cssNames.cssBtnPause)){ 364 self.playBtnPause(); 365 } 366 else{ 367 self.playBtnStart(); 368 } 369 return false; 370 }); 371 } 372 373 // Go buttons (prev/next) 374 if(this.goBtns){ 375 this.goBtnPrev = $("."+this.options.cssprefix+"-go-prev", this.domObj); 376 this.goBtnNext = $("."+this.options.cssprefix+"-go-next", this.domObj); 377 378 // Show/hide buttons on panel mouseover 379 if(this.options.panelbtnshover){ 380 this.gBtns.hide(); 381 $("."+this.options.cssprefix+"-panels", this.domObj).hover( 382 function(){ 383 self.gBtns.fadeIn(); 384 }, 385 function(){ 386 self.gBtns.fadeOut(); 387 } 388 ); 389 } 390 391 // Button click binding 392 this.goBtnPrev.click(function(){ 393 self.stepBackward($(this)); 394 return false; 395 }); 396 this.goBtnNext.click(function(){ 397 self.stepForward($(this)); 398 return false; 399 }); 400 } 401 }; 402 403 this._wrapPanels = function(){ 404 this.panels.wrapAll('<div class="'+this.cssNames.cssPanelsWrapper+'"></div>'); 405 this.panelsWrapper = $("."+this.cssNames.cssPanelsWrapper, this.panelsBag); 406 this.panelsWrapper.css({"position":"relative"}); 407 }; 408 409 this._change = function( eventSrc, scrollWay, goToId, lineScrolling, stopAuto ) { 410 411 // If there is a play button + auto-scrolling running 412 if(stopAuto && this.isPlaying!=null && this.isPlayBtn){ 413 this.playBtnPause(); 414 } 415 416 // Don't go further if the side is reached and carousel isn't circular 417 // The slide is stopped if the button is disable 418 if(eventSrc){ 419 if(eventSrc.hasClass(this.cssNames.cssBtnDisable)){ 420 return false; 421 } 422 } 423 424 // By default, user action is blocked when nav is being animated. This to prevent the function calculation to go mad when the user is switching the items too quickly. 425 // This security applies on panels too. However it can be removed using the 'fastchange' option. 426 var stopGoing = 0; 427 var running = $(":animated", this.options.fastchange ? this.nav : this.domObj).size() > 0 ? 1 : 0; 428 429 if( !running ){ 430 this.prevId = this.currId; 431 432 // Increment the current id, only if linescrolling isn't required 433 if(goToId == null && !lineScrolling){ 434 this.currId = scrollWay == "-=" ? this.currId+1 : this.currId-1; 435 } 436 // Else if an id is given, we take it 437 else if(goToId != null){ 438 goToId = parseInt(goToId);// make sure it's a number 439 this.currId = goToId < 0 ? 0 : goToId > this.allItems-1 ? this.allItems-1 : goToId;// make sure it's in the nav range 440 var checkIdRange = eventSrc ? eventSrc.parent().parent().hasClass(this.options.cssprefix+"-nav-clip") ? false : true : true; 441 } 442 443 // If panel buttons exist, we activate them 444 if(this.goBtns){ 445 this.gBtns.removeClass(this.cssNames.cssBtnDisable); 446 } 447 448 // If the carousel isn't circular the controls must be hidden when sides are reached 449 if(!this.options.circular){ 450 // Top/left side is reached 451 if(this.currId == -1){ 452 this.currId = 0; 453 stopGoing = 1; 454 } 455 if(this.currId == 0 && this.goBtns){ 456 this.goBtnPrev.addClass(this.cssNames.cssBtnDisable); 457 } 458 459 // Bottom/right side is reached 460 if(this.currId == this.allItems){ 461 this.currId = this.allItems-1; 462 stopGoing = 1; 463 } 464 465 if(this.currId == this.allItems-1){ 466 if(this.options.auto){ 467 this.autoScrollStop(); 468 } 469 if(this.goBtns){ 470 this.goBtnNext.addClass(this.cssNames.cssBtnDisable); 471 } 472 } 473 } 474 // Otherwise if there is no scroll required, this.currId must be reset when sides are reached 475 else if(!this.scrollActive){ 476 if(this.currId == this.allItems){ 477 this.currId = 0; 478 } 479 if(this.currId == -1){ 480 this.currId = this.allItems-1; 481 } 482 } 483 484 // If the slide function isn't triggered from a nav LI event, we must check if the line must be scrolled or not 485 //if( (goToId == null || this.firstTime) && this.scrollActive && !stopGoing ){ 486 if( this.scrollActive && !stopGoing ){ 487 this._setNavScroll( lineScrolling, scrollWay, checkIdRange ); 488 } 489 490 // Highlight selected menu 491 if( this.isNavClip ){
492 this.selectThumbnail(this.currId); 493 } 494 495 // Switch to the next panel 496 // Note: if 'navpanelautoswitch' option is false, the panels won't switch when line is scrolling 497 if( ! (lineScrolling && !this.options.navpanelautoswitch) ){ 498 if( this.arePanels ){ 499 this._animPanel( this.currId, scrollWay ); 500 } 501 } 502 503 // First time cancel 504 if( this.firstTime ){ 505 this.firstTime = 0; 506 } 507 508 } // else > be patient, the line scroll is running ! 509 }; 510 511 this._setNavScroll = function( lineScrolling, scrollWay, checkIdRange ) { 512 513 // Get the current nav position 514 this._getNavPos(); 515 516 var triggerLineScroll = lineScrolling ? true : false; 517 var jumpToId = 0; 518 519 // No line scrolling required yet : we are going to check the current item position to determine if line scrolling is needed or not. 520 if( ! lineScrolling ){ 521 // Line scrolling will happen only if navclip sides are reached 522 // Number of items from the clip sides: 523 var idFromClipStart = Math.abs(this.currId+1 - this.LIbefore); 524 var idToClipEnd = this.options.shownavitems - idFromClipStart +1; 525 var currIdOnEdge = this.currId == 0 || this.currId == this.allItems-1 ? 1 : 0; 526 527 // If 'navscrollatend' option is activated, the line will scroll when navclip edges are reached (except if currId is the first or last item of the nav) 528 if( (this.options.navscrollatend && (idToClipEnd == 1 || idFromClipStart == 1)) && !this.firstTime && !currIdOnEdge ){ 529 jumpToId = this.options.scroll - 1; 530 triggerLineScroll = true; 531 } 532 533 // Else the line will scroll when currId is out of the navclip range by -1 or +1 534 if(idToClipEnd == 0 || idFromClipStart == 0){ 535 triggerLineScroll = true; 536 } 537 538 // A target id is specified (using 'changeWithId' method). No direction ('scrollWay = ""'). 539 // We check here the difference between target and previous Ids 540 if(checkIdRange){ 541 var idDiff = Math.abs(this.prevId - this.currId); 542 543 // The nav will scroll if the target id is different from the previous Id 544 // The scroll value will then be equal to the 'jumpToId' var, overwriting the 'scroll' option value. 545 if(idDiff > 0){ 546 jumpToId = idDiff; 547 triggerLineScroll = true; 548 } 549 } 550 551 // Dertermine scroll direction 552 if(scrollWay == ""){ 553 if(this.prevId == this.currId && !currIdOnEdge){ 554 scrollWay = this.scrollWay == "-=" ? "+=" : "-="; 555 } 556 else{ 557 scrollWay = this.prevId < this.currId ? "-=" : "+="; 558 } 559 } 560 this.scrollWay = scrollWay; 561 } 562 563 // If line scrolling is required 564 if( triggerLineScroll ){ 565 566 // How many lines will scroll ? By default the answer is 'this.options.scroll' or 'jumpToId'. But we check if there are enough lines left. 567 var scrollPower = jumpToId > 0 ? jumpToId : this.options.scroll; 568 var LIremain = scrollWay == "-=" ? this.LIafter : this.LIbefore; 569 var scrollto = LIremain < scrollPower ? LIremain : scrollPower; 570 var scrollSize = scrollto * this.navLIsize; 571 572 // Once the nav has scrolled, the <li> tag matching the currId value may not be visible in the nav clip. So we calculate here a new currId regarding to the nav position. 573 this.newId = scrollWay == "-=" ? this.LIbefore+scrollto : this.LIbefore-scrollto+this.options.shownavitems-1; 574 if( (scrollWay == "-=" && this.newId > this.currId) || (scrollWay == "+=" && this.newId < this.currId) ){ 575 this.currId = this.newId; 576 } 577 578 // Circular option is active 579 if(this.options.circular){ 580 if(this.LIbefore <= 0 && scrollWay == "+="){ 581 scrollWay = "-="; 582 this.currId = this.allItems-1; 583 scrollSize = ( this.LIafter/this.options.scroll )*( this.navLIsize*this.options.scroll ); 584 } 585 else if(this.LIafter == 0 && scrollWay == "-="){ 586 scrollWay = "+="; 587 this.currId = 0; 588 scrollSize = Math.abs(this.navPos); 589 } 590 } 591 592 // Finally, the scroll animation 593 this._animNav(scrollWay, scrollSize); 594 } 595 }; 596 597 this._animPanel = function( currId, scrollWay ) { 598 599 // Current panel index 600 this.currPanel = this.panels.eq(currId); 601 602 // Slide panel (only if not already active) 603 if(!this.currPanel.hasClass( this.cssNames.cssActive )){ 604 605 // First panel display (no effect) 606 if(this.firstTime){ 607 this.panelTransition = this.options.panelfxfirst; 608 var FirstTime = 1; 609 } 610 611 // Else we check for the transition effect 612 else{ 613 // No effect 614 var freeheightfx = this.options.freeheight && this.options.panelfx == "fading" ? "tabsfading" : "none"; 615 this.panelTransition = this.options.freeheight ? freeheightfx : this.options.panelfx; 616 } 617 618 // Call the before function is it exists 619 if(self.options.panelfxbefore) self.options.panelfxbefore(); 620 621 // Call the transition function 622 this._panelTransitions[ this.panelTransition ](scrollWay, FirstTime); 623 } 624 }; 625 626 this._animNav = function( scrollWay, scrollSize ) { 627 var navComplete = function(){
628 // If the nav isn't circular, buttons are disabled when start or end is reached 629 if(!self.options.circular && self.scrollBtns){ 630 self.navBtns.removeClass(self.cssNames.cssBtnDisable); 631 632 // Get the nav position 633 self._getNavPos(); 634 635 if(self.LIbefore <= 0){ 636 self.navBtnPrev.addClass(self.cssNames.cssBtnDisable); 637 } 638 else if(self.LIafter <= 0){ 639 self.navBtnNext.addClass(self.cssNames.cssBtnDisable); 640 } 641 } 642 // Reload the animation if scrollcontinue option is true 643 if(self.scrollcontinue){ 644 setTimeout(function(){ self.scrollcontinue == "-=" ? self.navPrev() : self.navNext() }, 0); 645 } 646 }; 647 648 this.navTransition = this.options.navfx; 649 this._navTransitions[ this.navTransition ](scrollWay, scrollSize, navComplete); 650 }; 651 652 this._panelTransitions = { 653 654 none : function(scrollWay, FirstTime) { 655 self.panels.removeClass(self.cssNames.cssActive).hide(); 656 self.currPanel.addClass(self.cssNames.cssActive).show(); 657 if(self.options.panelfxafter){self.options.panelfxafter();} 658 }, 659 660 sliding : function(scrollWay, FirstTime) { 661 662 // Slide direction 663 if(scrollWay == ""){ 664 scrollWay = self.prevPanel < self.currId ? "-=" : "+="; 665 } 666 self.prevPanel = self.currId; 667 668 // Position/Size values for CSS 669 var cssPosValue = scrollWay == "-=" ? "+" : "-"; 670 var cssSlidePosAttr = self.options.verticalslide ? "top" : "left"; 671 var domObjSize = self.options.verticalnav ? self.domObj.height() : self.domObj.width(); 672 var slideScrollValue = cssSlidePosAttr == "top" ? {top: scrollWay+domObjSize} : {left: scrollWay+domObjSize}; 673 674 // Panels selection 675 self.oldPanel = $("."+self.cssNames.cssOld, self.domObj); 676 self.activePanel = $("."+self.cssNames.cssActive, self.domObj); 677 678 // Panels CSS properties 679 self.panels.css(cssSlidePosAttr, "0"); 680 self.oldPanel.removeClass(self.cssNames.cssOld).hide(); 681 self.activePanel.removeClass(self.cssNames.cssActive).addClass(self.cssNames.cssOld); 682 self.currPanel.addClass(self.cssNames.cssActive).css(cssSlidePosAttr, cssPosValue+domObjSize + "px").show(); 683 684 // Wrapper animation 685 self.panelsWrapper.stop(true, true).css(cssSlidePosAttr, "0").animate( 686 slideScrollValue, 687 self.options.panelfxspeed, 688 self.options.panelfxeasing, 689 function(){ 690 if(self.options.panelfxafter) self.options.panelfxafter(); 691 } 692 ); 693 }, 694 695 fading: function(scrollWay, FirstTime) { 696 if(FirstTime){ 697 self.panels.hide(); 698 } 699 else self.currPanel.css("display","none"); 700 701 $("."+self.cssNames.cssOld, self.domObj).removeClass(self.cssNames.cssOld); 702 $("."+self.cssNames.cssActive, self.domObj).stop(true, true).removeClass(self.cssNames.cssActive).addClass(self.cssNames.cssOld); 703 704 self.currPanel.addClass(self.cssNames.cssActive) 705 .animate( 706 {"opacity":"show"}, 707 self.options.panelfxspeed, 708 self.options.panelfxeasing, 709 function(){ 710 if(self.options.panelfxafter){self.options.panelfxafter();} 711 } 712 ); 713 }, 714 715 tabsfading : function(scrollWay, FirstTime) { 716 self.panels.removeClass(self.cssNames.cssActive).hide(); 717 self.currPanel.fadeIn(self.options.panelfxspeed, function(){ 718 if(self.options.panelfxafter){self.options.panelfxafter();} 719 }); 720 } 721 }; 722 723 this._navTransitions = { 724 725 none : function(scrollWay, scrollSize, navComplete) { 726 var newScrollSize = scrollWay == "-=" ? self.navPos-scrollSize : self.navPos+scrollSize; 727 self.navUL.css( self.cssPosAttr, newScrollSize +"px" ); 728 navComplete(); 729 }, 730 731 sliding: function(scrollWay, scrollSize, navComplete) { 732 self.navUL.animate( 733 self.cssPosAttr == "left" ? {left:scrollWay+scrollSize} : {top:scrollWay+scrollSize} 734 , self.options.scrollspeed, self.options.scrolleasing 735 , function(){ 736 navComplete(); 737 } 738 ); 739 } 740 }; 741 742 this.playBtnPause = function() { 743 this.playBtn.removeClass(this.cssNames.cssBtnPause); 744 this.autoScrollStop(); 745 }; 746 747 this.playBtnStart = function() { 748 this.playBtn.addClass(self.cssNames.cssBtnPause); 749 this.autoScrollStart(); 750 }; 751
752 this.autoScrollStart = function() { 753 var self = this; 754 this.isPlaying = setInterval(function(){ 755 self._change(null, "-=", null, self.lineScrollDo, null); 756 }, self.options.autospeed); 757 }; 758 759 this.autoScrollStop = function() { 760 clearTimeout(this.isPlaying); 761 this.isPlaying = null; 762 }; 763 764 this.changeWithId = function( id, eventSrc ) { 765 this._change(eventSrc, "", id, 0, 1); 766 }; 767 768 this.stepBackward = function(eventSrc) { 769 this._change(eventSrc, "+=", null, self.lineScrollDo, 1); 770 }; 771 772 this.stepForward = function(eventSrc) { 773 this._change(eventSrc, "-=", null, self.lineScrollDo, 1); 774 }; 775 776 this.navPrev = function(c) { 777 if(c){self.scrollcontinue = "-=";} 778 this._change(this.navBtnPrev, "+=", null, 1, 1); 779 }; 780 781 this.navNext = function(c) { 782 if(c){self.scrollcontinue = "+=";} 783 this._change(this.navBtnNext, "-=", null, 1, 1); 784 }; 785 786 this.navStopContinuous = function() { 787 self.scrollcontinue = ""; 788 }; 789 790 this.selectThumbnail = function( currId ){ 791 $("."+this.cssNames.cssSelected, this.navUL).removeClass(this.cssNames.cssSelected); 792 this.navLI.eq(currId).addClass(this.cssNames.cssSelected); 793 }; 794 795 this.addTransition = function( name, fn ) { 796 _transitions[name] = fn; 797 }; 798 }; 799 800 $.fn.sliderkit = function(options){ 801 // Don't act on absent elements -via Paul Irish's advice 802 if ( this.length ) { 803 return this.each(function(){ 804 // Create a new sliderkit object 805 var mySliderkit = new SliderKit(); 806 807 // Run the initialization function of the sliderkit 808 mySliderkit._init( this, options ); // `this` refers to the element 809 810 // Save the instance of the sliderkit object in the element's data store 811 $.data(this, "sliderkit", mySliderkit); 812 }); 813 } 814 }; 815 816})(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.