1/* 2 * jQuery Orbit Plugin 1.3.0 3 * www.ZURB.com/playground 4 * Copyright 2010, ZURB 5 * Free to use under the MIT license. 6 * http://www.opensource.org/licenses/mit-license.php 7*/ 8 9 10(function($) { 11 12 var ORBIT = { 13 14 defaults: { 15 animation: 'horizontal-push', // fade, horizontal-slide, vertical-slide, horizontal-push, vertical-push 16 animationSpeed: 600, // how fast animtions are 17 timer: true, // true or false to have the timer 18 advanceSpeed: 4000, // if timer is enabled, time between transitions 19 pauseOnHover: false, // if you hover pauses the slider 20 startClockOnMouseOut: false, // if clock should start on MouseOut 21 startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again 22 directionalNav: true, // manual advancing directional navs 23 captions: true, // do you want captions? 24 captionAnimation: 'fade', // fade, slideOpen, none 25 captionAnimationSpeed: 600, // if so how quickly should they animate in 26 bullets: false, // true or false to activate the bullet navigation 27 bulletThumbs: false, // thumbnails for the bullets 28 bulletThumbLocation: '', // location from this file where thumbs will be 29 afterSlideChange: $.noop, // empty function 30 fluid: false, // true or ratio (ex: 4x3) to force an aspect ratio for content slides, only works from within a fluid layout 31 centerBullets: true // center bullet nav with js, turn this off if you want to position the bullet nav manually 32 }, 33 34 activeSlide: 0, 35 numberSlides: 0, 36 orbitWidth: null, 37 orbitHeight: null, 38 locked: null, 39 timerRunning: null, 40 degrees: 0, 41 wrapperHTML: '<div class="orbit-wrapper" />', 42 timerHTML: '<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>', 43 captionHTML: '<div class="orbit-caption"></div>', 44 directionalNavHTML: '<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>', 45 bulletHTML: '<ul class="orbit-bullets"></ul>', 46 47 init: function (element, options) { 48 var $imageSlides, 49 imagesLoadedCount = 0, 50 self = this; 51 52 // Bind functions to correct context 53 this.clickTimer = $.proxy(this.clickTimer, this); 54 this.addBullet = $.proxy(this.addBullet, this); 55 this.resetAndUnlock = $.proxy(this.resetAndUnlock, this); 56 this.stopClock = $.proxy(this.stopClock, this); 57 this.startTimerAfterMouseLeave = $.proxy(this.startTimerAfterMouseLeave, this); 58 this.clearClockMouseLeaveTimer = $.proxy(this.clearClockMouseLeaveTimer, this); 59 this.rotateTimer = $.proxy(this.rotateTimer, this); 60 61 this.options = $.extend({}, this.defaults, options); 62 if (this.options.timer === 'false') this.options.timer = false; 63 if (this.options.captions === 'false') this.options.captions = false; 64 if (this.options.directionalNav === 'false') this.options.directionalNav = false; 65 66 this.$element = $(element); 67 this.$wrapper = this.$element.wrap(this.wrapperHTML).parent(); 68 this.$slides = this.$element.children('img, a, div'); 69 70 if (this.options.fluid) { 71 this.$wrapper.addClass('fluid'); 72 } 73 74 this.$element.bind('orbit.next', function () { 75 self.shift('next'); 76 }); 77 78 this.$element.bind('orbit.prev', function () { 79 self.shift('prev'); 80 }); 81 82 this.$element.bind('orbit.goto', function (event, index) { 83 self.shift(index); 84 }); 85 86 this.$element.bind('orbit.start', function (event, index) { 87 self.startClock(); 88 }); 89 90 this.$element.bind('orbit.stop', function (event, index) { 91 self.stopClock(); 92 }); 93 94 $imageSlides = this.$slides.filter('img'); 95 96 if ($imageSlides.length === 0) { 97 this.loaded(); 98 } else { 99 $imageSlides.bind('imageready', function () { 100 imagesLoadedCount += 1; 101 if (imagesLoadedCount === $imageSlides.length) { 102 self.loaded(); 103 } 104 }); 105 } 106 }, 107 108 loaded: function () { 109 this.$element 110 .addClass('orbit') 111 .css({width: '1px', height: '1px'}); 112 113 this.setDimentionsFromLargestSlide(); 114 this.updateOptionsIfOnlyOneSlide(); 115 this.setupFirstSlide(); 116 117 if (this.options.timer) { 118 this.setupTimer(); 119 this.startClock(); 120 } 121 122 if (this.options.captions) { 123 this.setupCaptions(); 124 } 125 126 if (this.options.directionalNav) { 127 this.setupDirectionalNav(); 128 } 129 130 if (this.options.bullets) { 131 this.setupBulletNav(); 132 this.setActiveBullet(); 133 } 134 }, 135 136 currentSlide: function () { 137 return this.$slides.eq(this.activeSlide); 138 }, 139 140 setDimentionsFromLargestSlide: function () { 141 //Collect all slides and set slider size of largest image 142 var self = this, 143 $fluidPlaceholder; 144 145 self.$element.add(self.$wrapper).width(this.$slides.first().width()); 146 self.$element.add(self.$wrapper).height(this.$slides.first().height()); 147 self.orbitWidth = this.$slides.first().width(); 148 self.orbitHeight = this.$slides.first().height(); 149 $fluidPlaceholder = this.$slides.first().clone(); 150 151 this.$slides.each(function () { 152 var slide = $(this), 153 slideWidth = slide.width(), 154 slideHeight = slide.height(); 155 156 if (slideWidth > self.$element.width()) { 157 self.$element.add(self.$wrapper).width(slideWidth);
158 self.orbitWidth = self.$element.width(); 159 } 160 if (slideHeight > self.$element.height()) { 161 self.$element.add(self.$wrapper).height(slideHeight); 162 self.orbitHeight = self.$element.height(); 163 $fluidPlaceholder = $(this).clone(); 164 } 165 self.numberSlides += 1; 166 }); 167 168 if (this.options.fluid) { 169 170 if (typeof this.options.fluid === "string") { 171 $fluidPlaceholder = $('<img src="http://placehold.it/' + this.options.fluid + '" />') 172 } 173 174 self.$element.prepend($fluidPlaceholder); 175 $fluidPlaceholder.addClass('fluid-placeholder'); 176 self.$element.add(self.$wrapper).css({width: 'inherit'}); 177 self.$element.add(self.$wrapper).css({height: 'inherit'}); 178 179 $(window).bind('resize', function () { 180 self.orbitWidth = self.$element.width(); 181 self.orbitHeight = self.$element.height(); 182 }); 183 } 184 }, 185 186 //Animation locking functions 187 lock: function () { 188 this.locked = true; 189 }, 190 191 unlock: function () { 192 this.locked = false; 193 }, 194 195 updateOptionsIfOnlyOneSlide: function () { 196 if(this.$slides.length === 1) { 197 this.options.directionalNav = false; 198 this.options.timer = false; 199 this.options.bullets = false; 200 } 201 }, 202 203 setupFirstSlide: function () { 204 //Set initial front photo z-index and fades it in 205 var self = this; 206 this.$slides.first() 207 .css({"z-index" : 3}) 208 .fadeIn(function() { 209 //brings in all other slides IF css declares a display: none 210 self.$slides.css({"display":"block"}) 211 }); 212 }, 213 214 startClock: function () { 215 var self = this; 216 217 if(!this.options.timer) { 218 return false; 219 } 220 221 if (this.$timer.is(':hidden')) { 222 this.clock = setInterval(function () { 223 self.$element.trigger('orbit.next'); 224 }, this.options.advanceSpeed); 225 } else { 226 this.timerRunning = true; 227 this.$pause.removeClass('active') 228 this.clock = setInterval(this.rotateTimer, this.options.advanceSpeed / 180); 229 } 230 }, 231 232 rotateTimer: function () { 233 var degreeCSS = "rotate(" + this.degrees + "deg)" 234 this.degrees += 2; 235 this.$rotator.css({ 236 "-webkit-transform": degreeCSS, 237 "-moz-transform": degreeCSS, 238 "-o-transform": degreeCSS 239 }); 240 if(this.degrees > 180) { 241 this.$rotator.addClass('move'); 242 this.$mask.addClass('move'); 243 } 244 if(this.degrees > 360) { 245 this.$rotator.removeClass('move'); 246 this.$mask.removeClass('move'); 247 this.degrees = 0; 248 this.$element.trigger('orbit.next'); 249 } 250 }, 251 252 stopClock: function () { 253 if (!this.options.timer) { 254 return false; 255 } else { 256 this.timerRunning = false; 257 clearInterval(this.clock); 258 this.$pause.addClass('active'); 259 } 260 }, 261 262 setupTimer: function () { 263 this.$timer = $(this.timerHTML); 264 this.$wrapper.append(this.$timer); 265 266 this.$rotator = this.$timer.find('.rotator'); 267 this.$mask = this.$timer.find('.mask'); 268 this.$pause = this.$timer.find('.pause'); 269 270 this.$timer.click(this.clickTimer); 271 272 if (this.options.startClockOnMouseOut) { 273 this.$wrapper.mouseleave(this.startTimerAfterMouseLeave); 274 this.$wrapper.mouseenter(this.clearClockMouseLeaveTimer); 275 } 276 277 if (this.options.pauseOnHover) { 278 this.$wrapper.mouseenter(this.stopClock); 279 } 280 }, 281 282 startTimerAfterMouseLeave: function () { 283 var self = this; 284 285 this.outTimer = setTimeout(function() { 286 if(!self.timerRunning){ 287 self.startClock(); 288 } 289 }, this.options.startClockOnMouseOutAfter) 290 }, 291 292 clearClockMouseLeaveTimer: function () { 293 clearTimeout(this.outTimer); 294 }, 295 296 clickTimer: function () { 297 if(!this.timerRunning) { 298 this.startClock(); 299 } else { 300 this.stopClock(); 301 } 302 }, 303 304 setupCaptions: function () { 305 this.$caption = $(this.captionHTML); 306 this.$wrapper.append(this.$caption); 307 this.setCaption(); 308 }, 309 310 setCaption: function () { 311 var captionLocation = this.currentSlide().attr('data-caption'), 312 captionHTML; 313 314 if (!this.options.captions) { 315 return false; 316 } 317 318 //Set HTML for the caption if it exists 319 if (captionLocation) { 320 captionHTML = $(captionLocation).html(); //get HTML from the matching HTML entity 321 this.$caption 322 .attr('id', captionLocation) // Add ID caption TODO why is the id being set? 323 .html(captionHTML); // Change HTML in Caption 324 //Animations for Caption entrances 325 switch (this.options.captionAnimation) { 326 case 'none': 327 this.$caption.show(); 328 break; 329 case 'fade': 330 this.$caption.fadeIn(this.options.captionAnimationSpeed); 331 break; 332 case 'slideOpen': 333 this.$caption.slideDown(this.options.captionAnimationSpeed); 334 break; 335 } 336 } else { 337 //Animations for Caption exits 338 switch (this.options.captionAnimation) { 339 case 'none': 340 this.$caption.hide(); 341 break; 342 case 'fade': 343 this.$caption.fadeOut(this.options.captionAnimationSpeed); 344 break; 345 case 'slideOpen':
346 this.$caption.slideUp(this.options.captionAnimationSpeed); 347 break; 348 } 349 } 350 }, 351 352 setupDirectionalNav: function () { 353 var self = this; 354 355 this.$wrapper.append(this.directionalNavHTML); 356 357 this.$wrapper.find('.left').click(function () { 358 self.stopClock(); 359 self.$element.trigger('orbit.prev'); 360 }); 361 362 this.$wrapper.find('.right').click(function () { 363 self.stopClock(); 364 self.$element.trigger('orbit.next'); 365 }); 366 }, 367 368 setupBulletNav: function () { 369 this.$bullets = $(this.bulletHTML); 370 this.$wrapper.append(this.$bullets); 371 this.$slides.each(this.addBullet); 372 this.$element.addClass('with-bullets'); 373 if (this.options.centerBullets) this.$bullets.css('margin-left', -this.$bullets.width() / 2); 374 }, 375 376 addBullet: function (index, slide) { 377 var position = index + 1, 378 $li = $('<li>' + (position) + '</li>'), 379 thumbName, 380 self = this; 381 382 if (this.options.bulletThumbs) { 383 thumbName = $(slide).attr('data-thumb'); 384 if (thumbName) { 385 $li 386 .addClass('has-thumb') 387 .css({background: "url(" + this.options.bulletThumbLocation + thumb
387Name + ") no-repeat"});; 388 } 389 } 390 this.$bullets.append($li); 391 $li.data('index', index); 392 $li.click(function () { 393 self.stopClock(); 394 self.$element.trigger('orbit.goto', [$li.data('index')]) 395 }); 396 }, 397 398 setActiveBullet: function () { 399 if(!this.options.bullets) { return false; } else { 400 this.$bullets.find('li') 401 .removeClass('active') 402 .eq(this.activeSlide) 403 .addClass('active'); 404 } 405 }, 406 407 resetAndUnlock: function () { 408 this.$slides 409 .eq(this.prevActiveSlide) 410 .css({"z-index" : 1}); 411 this.unlock(); 412 this.options.afterSlideChange.call(this, this.$slides.eq(this.prevActiveSlide), this.$slides.eq(this.activeSlide)); 413 }, 414 415 shift: function (direction) { 416 var slideDirection = direction; 417 418 //remember previous activeSlide 419 this.prevActiveSlide = this.activeSlide; 420 421 //exit function if bullet clicked is same as the current image 422 if (this.prevActiveSlide == slideDirection) { return false; } 423 424 if (this.$slides.length == "1") { return false; } 425 if (!this.locked) { 426 this.lock(); 427 //deduce the proper activeImage 428 if (direction == "next") { 429 this.activeSlide++; 430 if (this.activeSlide == this.numberSlides) { 431 this.activeSlide = 0; 432 } 433 } else if (direction == "prev") { 434 this.activeSlide-- 435 if (this.activeSlide < 0) { 436 this.activeSlide = this.numberSlides - 1; 437 } 438 } else { 439 this.activeSlide = direction; 440 if (this.prevActiveSlide < this.activeSlide) { 441 slideDirection = "next"; 442 } else if (this.prevActiveSlide > this.activeSlide) { 443 slideDirection = "prev" 444 } 445 } 446 447 //set to correct bullet 448 this.setActiveBullet(); 449 450 //set previous slide z-index to one below what new activeSlide will be 451 this.$slides 452 .eq(this.prevActiveSlide) 453 .css({"z-index" : 2}); 454 455 //fade 456 if (this.options.animation == "fade") { 457 this.$slides 458 .eq(this.activeSlide) 459 .css({"opacity" : 0, "z-index" : 3}) 460 .animate({"opacity" : 1}, this.options.animationSpeed, this.resetAndUnlock); 461 } 462 463 //horizontal-slide 464 if (this.options.animation == "horizontal-slide") { 465 if (slideDirection == "next") { 466 this.$slides 467 .eq(this.activeSlide) 468 .css({"left": this.orbitWidth, "z-index" : 3}) 469 .animate({"left" : 0}, this.options.animationSpeed, this.resetAndUnlock); 470 } 471 if (slideDirection == "prev") { 472 this.$slides 473 .eq(this.activeSlide) 474 .css({"left": -this.orbitWidth, "z-index" : 3}) 475 .animate({"left" : 0}, this.options.animationSpeed, this.resetAndUnlock); 476 } 477 } 478 479 //vertical-slide 480 if (this.options.animation == "vertical-slide") { 481 if (slideDirection == "prev") { 482 this.$slides 483 .eq(this.activeSlide) 484 .css({"top": this.orbitHeight, "z-index" : 3}) 485 .animate({"top" : 0}, this.options.animationSpeed, this.resetAndUnlock); 486 } 487 if (slideDirection == "next") { 488 this.$slides 489 .eq(this.activeSlide) 490 .css({"top": -this.orbitHeight, "z-index" : 3}) 491 .animate({"top" : 0}, this.options.animationSpeed, this.resetAndUnlock); 492 } 493 } 494 495 //horizontal-push 496 if (this.options.animation == "horizontal-push") { 497 if (slideDirection == "next") { 498 this.$slides 499 .eq(this.activeSlide) 500 .css({"left": this.orbitWidth, "z-index" : 3}) 501 .animate({"left" : 0}, this.options.animationSpeed, this.resetAndUnlock); 502 this.$slides 503 .eq(this.prevActiveSlide) 504 .animate({"left" : -this.orbitWidth}, this.options.animationSpeed); 505 } 506 if (slideDirection == "prev") { 507 this.$slides 508 .eq(this.activeSlide) 509 .css({"left": -this.orbitWidth, "z-index" : 3}) 510 .animate({"left" : 0}, this.options.animationSpeed, this.resetAndUnlock); 511 this.$slides 512 .eq(this.prevActiveSlide) 513 .animate({"left" : this.orbitWidth}, this.options.animationSpeed); 514 } 515 } 516 517 //vertical-push 518 if (this.options.animation == "vertical-push") { 519 if (slideDirection == "next") { 520 this.$slides 521 .eq(this.activeSlide) 522 .css({top: -this.orbitHeight, "z-index" : 3}) 523 .animate({top : 0}, this.options.animationSpeed, this.resetAndUnlock); 524 this.$slides 525 .eq(this.prevActiveSlide) 526 .animate({top : this.orbitHeight}, this.options.animationSpeed); 527 } 528 if (slideDirection == "prev") { 529 this.$slides 530 .eq(this.activeSlide) 531 .css({top: this.orbitHeight, "z-index" : 3}) 532 .animate({top : 0}, this.options.animationSpeed, this.resetAndUnlock); 533 this.$slides 534 .eq(this.prevActiveSlide) 535 .animate({top : -this.orbitHeight}, this.options.animationSpeed); 536 } 537 } 538 539 this.setCaption(); 540 } 541 } 542 }; 543 544 $.fn.orbit = function (options) { 545 return this.each(function () { 546 var orbit = $.extend({}, ORBIT); 547 orbit.init(this, options); 548 });
549 }; 550 551})(jQuery); 552 553/*! 554 * jQuery imageready Plugin 555 * http://www.zurb.com/playground/ 556 * 557 * Copyright 2011, ZURB 558 * Released under the MIT License 559 */ 560(function ($) { 561 562 var options = {}; 563 564 $.event.special.imageready = { 565 566 setup: function (data, namespaces, eventHandle) { 567 options = data || options; 568 }, 569 570 add: function (handleObj) { 571 var $this = $(this), 572 src; 573 574 if ( this.nodeType === 1 && this.tagName.toLowerCase() === 'img' && this.src !== '' ) { 575 if (options.forceLoad) { 576 src = $this.attr('src'); 577 $this.attr('src', ''); 578 bindToLoad(this, handleObj.handler); 579 $this.attr('src', src); 580 } else if ( this.complete || this.readyState === 4 ) { 581 handleObj.handler.apply(this, arguments); 582 } else { 583 bindToLoad(this, handleObj.handler); 584 } 585 } 586 }, 587 588 teardown: function (namespaces) { 589 $(this).unbind('.imageready'); 590 } 591 }; 592 593 function bindToLoad(element, callback) { 594 var $this = $(element); 595 596 $this.bind('load.imageready', function () { 597 callback.apply(element, arguments); 598 $this.unbind('load.imageready'); 599 }); 600 } 601 602}(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.