jquery.orbit-1.2.3.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400
  1. /*
  2. * jQuery Orbit Plugin 1.2.3
  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. (function($) {
  9. $.fn.orbit = function(options) {
  10. //Defaults to extend options
  11. var defaults = {
  12. animation: 'horizontal-push', // fade, horizontal-slide, vertical-slide, horizontal-push
  13. animationSpeed: 600, // how fast animtions are
  14. timer: true, // true or false to have the timer
  15. advanceSpeed: 4000, // if timer is enabled, time between transitions
  16. pauseOnHover: false, // if you hover pauses the slider
  17. startClockOnMouseOut: false, // if clock should start on MouseOut
  18. startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
  19. directionalNav: true, // manual advancing directional navs
  20. captions: true, // do you want captions?
  21. captionAnimation: 'fade', // fade, slideOpen, none
  22. captionAnimationSpeed: 600, // if so how quickly should they animate in
  23. bullets: false, // true or false to activate the bullet navigation
  24. bulletThumbs: false, // thumbnails for the bullets
  25. bulletThumbLocation: '', // location from this file where thumbs will be
  26. afterSlideChange: function(){} // empty function
  27. };
  28. //Extend those options
  29. var options = $.extend(defaults, options);
  30. return this.each(function() {
  31. // ==============
  32. // ! SETUP
  33. // ==============
  34. //Global Variables
  35. var activeSlide = 0,
  36. numberSlides = 0,
  37. orbitWidth,
  38. orbitHeight,
  39. locked;
  40. //Initialize
  41. var orbit = $(this).addClass('orbit'),
  42. orbitWrapper = orbit.wrap('<div class="orbit-wrapper" />').parent();
  43. orbit.add(orbitWidth).width('1px').height('1px');
  44. //Collect all slides and set slider size of largest image
  45. var slides = orbit.children('img, a, div');
  46. slides.each(function() {
  47. var _slide = $(this),
  48. _slideWidth = _slide.width(),
  49. _slideHeight = _slide.height();
  50. if(_slideWidth > orbit.width()) {
  51. orbit.add(orbitWrapper).width(_slideWidth);
  52. orbitWidth = orbit.width();
  53. }
  54. if(_slideHeight > orbit.height()) {
  55. orbit.add(orbitWrapper).height(_slideHeight);
  56. orbitHeight = orbit.height();
  57. }
  58. numberSlides++;
  59. });
  60. //Animation locking functions
  61. function unlock() {
  62. locked = false;
  63. }
  64. function lock() {
  65. locked = true;
  66. }
  67. //If there is only a single slide remove nav, timer and bullets
  68. if(slides.length == 1) {
  69. options.directionalNav = false;
  70. options.timer = false;
  71. options.bullets = false;
  72. }
  73. //Set initial front photo z-index and fades it in
  74. slides.eq(activeSlide)
  75. .css({"z-index" : 3})
  76. .fadeIn(function() {
  77. //brings in all other slides IF css declares a display: none
  78. slides.css({"display":"block"})
  79. });
  80. // ==============
  81. // ! TIMER
  82. // ==============
  83. //Timer Execution
  84. function startClock() {
  85. if(!options.timer || options.timer == 'false') {
  86. return false;
  87. //if timer is hidden, don't need to do crazy calculations
  88. } else if(timer.is(':hidden')) {
  89. clock = setInterval(function(e){
  90. shift("next");
  91. }, options.advanceSpeed);
  92. //if timer is visible and working, let's do some math
  93. } else {
  94. timerRunning = true;
  95. pause.removeClass('active')
  96. clock = setInterval(function(e){
  97. var degreeCSS = "rotate("+degrees+"deg)"
  98. degrees += 2
  99. rotator.css({
  100. "-webkit-transform": degreeCSS,
  101. "-moz-transform": degreeCSS,
  102. "-o-transform": degreeCSS
  103. });
  104. if(degrees > 180) {
  105. rotator.addClass('move');
  106. mask.addClass('move');
  107. }
  108. if(degrees > 360) {
  109. rotator.removeClass('move');
  110. mask.removeClass('move');
  111. degrees = 0;
  112. shift("next");
  113. }
  114. }, options.advanceSpeed/180);
  115. }
  116. }
  117. function stopClock() {
  118. if(!options.timer || options.timer == 'false') { return false; } else {
  119. timerRunning = false;
  120. clearInterval(clock);
  121. pause.addClass('active');
  122. }
  123. }
  124. //Timer Setup
  125. if(options.timer) {
  126. var timerHTML = '<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>'
  127. orbitWrapper.append(timerHTML);
  128. var timer = orbitWrapper.children('div.timer'),
  129. timerRunning;
  130. if(timer.length != 0) {
  131. var rotator = $('div.timer span.rotator'),
  132. mask = $('div.timer span.mask'),
  133. pause = $('div.timer span.pause'),
  134. degrees = 0,
  135. clock;
  136. startClock();
  137. timer.click(function() {
  138. if(!timerRunning) {
  139. startClock();
  140. } else {
  141. stopClock();
  142. }
  143. });
  144. if(options.startClockOnMouseOut){
  145. var outTimer;
  146. orbitWrapper.mouseleave(function() {
  147. outTimer = setTimeout(function() {
  148. if(!timerRunning){
  149. startClock();
  150. }
  151. }, options.startClockOnMouseOutAfter)
  152. })
  153. orbitWrapper.mouseenter(function() {
  154. clearTimeout(outTimer);
  155. })
  156. }
  157. }
  158. }
  159. //Pause Timer on hover
  160. if(options.pauseOnHover) {
  161. orbitWrapper.mouseenter(function() {
  162. stopClock();
  163. });
  164. }
  165. // ==============
  166. // ! CAPTIONS
  167. // ==============
  168. //Caption Setup
  169. if(options.captions) {
  170. var captionHTML = '<div class="orbit-caption"></div>';
  171. orbitWrapper.append(captionHTML);
  172. var caption = orbitWrapper.children('.orbit-caption');
  173. setCaption();
  174. }
  175. //Caption Execution
  176. function setCaption() {
  177. if(!options.captions || options.captions =="false") {
  178. return false;
  179. } else {
  180. var _captionLocation = slides.eq(activeSlide).data('caption'); //get ID from rel tag on image
  181. _captionHTML = $(_captionLocation).html(); //get HTML from the matching HTML entity
  182. //Set HTML for the caption if it exists
  183. if(_captionHTML) {
  184. caption
  185. .attr('id',_captionLocation) // Add ID caption
  186. .html(_captionHTML); // Change HTML in Caption
  187. //Animations for Caption entrances
  188. if(options.captionAnimation == 'none') {
  189. caption.show();
  190. }
  191. if(options.captionAnimation == 'fade') {
  192. caption.fadeIn(options.captionAnimationSpeed);
  193. }
  194. if(options.captionAnimation == 'slideOpen') {
  195. caption.slideDown(options.captionAnimationSpeed);
  196. }
  197. } else {
  198. //Animations for Caption exits
  199. if(options.captionAnimation == 'none') {
  200. caption.hide();
  201. }
  202. if(options.captionAnimation == 'fade') {
  203. caption.fadeOut(options.captionAnimationSpeed);
  204. }
  205. if(options.captionAnimation == 'slideOpen') {
  206. caption.slideUp(options.captionAnimationSpeed);
  207. }
  208. }
  209. }
  210. }
  211. // ==================
  212. // ! DIRECTIONAL NAV
  213. // ==================
  214. //DirectionalNav { rightButton --> shift("next"), leftButton --> shift("prev");
  215. if(options.directionalNav) {
  216. if(options.directionalNav == "false") { return false; }
  217. var directionalNavHTML = '<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>';
  218. orbitWrapper.append(directionalNavHTML);
  219. var leftBtn = orbitWrapper.children('div.slider-nav').children('span.left'),
  220. rightBtn = orbitWrapper.children('div.slider-nav').children('span.right');
  221. leftBtn.click(function() {
  222. stopClock();
  223. shift("prev");
  224. });
  225. rightBtn.click(function() {
  226. stopClock();
  227. shift("next")
  228. });
  229. }
  230. // ==================
  231. // ! BULLET NAV
  232. // ==================
  233. //Bullet Nav Setup
  234. if(options.bullets) {
  235. var bulletHTML = '<ul class="orbit-bullets"></ul>';
  236. orbitWrapper.append(bulletHTML);
  237. var bullets = orbitWrapper.children('ul.orbit-bullets');
  238. for(i=0; i<numberSlides; i++) {
  239. var liMarkup = $('<li>'+(i+1)+'</li>');
  240. if(options.bulletThumbs) {
  241. var thumbName = slides.eq(i).data('thumb');
  242. if(thumbName) {
  243. var liMarkup = $('<li class="has-thumb">'+i+'</li>')
  244. liMarkup.css({"background" : "url("+options.bulletThumbLocation+thumbName+") no-repeat"});
  245. }
  246. }
  247. orbitWrapper.children('ul.orbit-bullets').append(liMarkup);
  248. liMarkup.data('index',i);
  249. liMarkup.click(function() {
  250. stopClock();
  251. shift($(this).data('index'));
  252. });
  253. }
  254. setActiveBullet();
  255. }
  256. //Bullet Nav Execution
  257. function setActiveBullet() {
  258. if(!options.bullets) { return false; } else {
  259. bullets.children('li').removeClass('active').eq(activeSlide).addClass('active');
  260. }
  261. }
  262. // ====================
  263. // ! SHIFT ANIMATIONS
  264. // ====================
  265. //Animating the shift!
  266. function shift(direction) {
  267. //remember previous activeSlide
  268. var prevActiveSlide = activeSlide,
  269. slideDirection = direction;
  270. //exit function if bullet clicked is same as the current image
  271. if(prevActiveSlide == slideDirection) { return false; }
  272. //reset Z & Unlock
  273. function resetAndUnlock() {
  274. slides
  275. .eq(prevActiveSlide)
  276. .css({"z-index" : 1});
  277. unlock();
  278. options.afterSlideChange.call(this);
  279. }
  280. if(slides.length == "1") { return false; }
  281. if(!locked) {
  282. lock();
  283. //deduce the proper activeImage
  284. if(direction == "next") {
  285. activeSlide++
  286. if(activeSlide == numberSlides) {
  287. activeSlide = 0;
  288. }
  289. } else if(direction == "prev") {
  290. activeSlide--
  291. if(activeSlide < 0) {
  292. activeSlide = numberSlides-1;
  293. }
  294. } else {
  295. activeSlide = direction;
  296. if (prevActiveSlide < activeSlide) {
  297. slideDirection = "next";
  298. } else if (prevActiveSlide > activeSlide) {
  299. slideDirection = "prev"
  300. }
  301. }
  302. //set to correct bullet
  303. setActiveBullet();
  304. //set previous slide z-index to one below what new activeSlide will be
  305. slides
  306. .eq(prevActiveSlide)
  307. .css({"z-index" : 2});
  308. //fade
  309. if(options.animation == "fade") {
  310. slides
  311. .eq(activeSlide)
  312. .css({"opacity" : 0, "z-index" : 3})
  313. .animate({"opacity" : 1}, options.animationSpeed, resetAndUnlock);
  314. }
  315. //horizontal-slide
  316. if(options.animation == "horizontal-slide") {
  317. if(slideDirection == "next") {
  318. slides
  319. .eq(activeSlide)
  320. .css({"left": orbitWidth, "z-index" : 3})
  321. .animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
  322. }
  323. if(slideDirection == "prev") {
  324. slides
  325. .eq(activeSlide)
  326. .css({"left": -orbitWidth, "z-index" : 3})
  327. .animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
  328. }
  329. }
  330. //vertical-slide
  331. if(options.animation == "vertical-slide") {
  332. if(slideDirection == "prev") {
  333. slides
  334. .eq(activeSlide)
  335. .css({"top": orbitHeight, "z-index" : 3})
  336. .animate({"top" : 0}, options.animationSpeed, resetAndUnlock);
  337. }
  338. if(slideDirection == "next") {
  339. slides
  340. .eq(activeSlide)
  341. .css({"top": -orbitHeight, "z-index" : 3})
  342. .animate({"top" : 0}, options.animationSpeed, resetAndUnlock);
  343. }
  344. }
  345. //push-over
  346. if(options.animation == "horizontal-push") {
  347. if(slideDirection == "next") {
  348. slides
  349. .eq(activeSlide)
  350. .css({"left": orbitWidth, "z-index" : 3})
  351. .animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
  352. slides
  353. .eq(prevActiveSlide)
  354. .animate({"left" : -orbitWidth}, options.animationSpeed);
  355. }
  356. if(slideDirection == "prev") {
  357. slides
  358. .eq(activeSlide)
  359. .css({"left": -orbitWidth, "z-index" : 3})
  360. .animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
  361. slides
  362. .eq(prevActiveSlide)
  363. .animate({"left" : orbitWidth}, options.animationSpeed);
  364. }
  365. }
  366. setCaption();
  367. } //lock
  368. }//orbit function
  369. });//each call
  370. }//orbit plugin call
  371. })(jQuery);