jquery.timelinr-0.9.54.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. /* ----------------------------------
  2. jQuery Timelinr 0.9.54
  3. tested with jQuery v1.6+
  4. Copyright 2011, CSSLab.cl
  5. Free under the MIT license.
  6. http://www.opensource.org/licenses/mit-license.php
  7. instructions: http://www.csslab.cl/2011/08/18/jquery-timelinr/
  8. ---------------------------------- */
  9. jQuery.fn.timelinr = function(options){
  10. // default plugin settings
  11. settings = jQuery.extend({
  12. orientation: 'horizontal', // value: horizontal | vertical, default to horizontal
  13. containerDiv: '#timeline', // value: any HTML tag or #id, default to #timeline
  14. datesDiv: '#dates', // value: any HTML tag or #id, default to #dates
  15. datesSelectedClass: 'selected', // value: any class, default to selected
  16. datesSpeed: 'normal', // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
  17. issuesDiv: '#issues', // value: any HTML tag or #id, default to #issues
  18. issuesSelectedClass: 'selected', // value: any class, default to selected
  19. issuesSpeed: 'fast', // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
  20. issuesTransparency: 0.2, // value: integer between 0 and 1 (recommended), default to 0.2
  21. issuesTransparencySpeed: 500, // value: integer between 100 and 1000 (recommended), default to 500 (normal)
  22. prevButton: '#prev', // value: any HTML tag or #id, default to #prev
  23. nextButton: '#next', // value: any HTML tag or #id, default to #next
  24. arrowKeys: 'false', // value: true | false, default to false
  25. startAt: 1, // value: integer, default to 1 (first)
  26. autoPlay: 'false', // value: true | false, default to false
  27. autoPlayDirection: 'forward', // value: forward | backward, default to forward
  28. autoPlayPause: 2000 // value: integer (1000 = 1 seg), default to 2000 (2segs)
  29. }, options);
  30. $(function(){
  31. // setting variables... many of them
  32. var howManyDates = $(settings.datesDiv+' li').length;
  33. var howManyIssues = $(settings.issuesDiv+' li').length;
  34. var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
  35. var currentIssue = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass);
  36. var widthContainer = $(settings.containerDiv).width();
  37. var heightContainer = $(settings.containerDiv).height();
  38. var widthIssues = $(settings.issuesDiv).width();
  39. var heightIssues = $(settings.issuesDiv).height();
  40. var widthIssue = $(settings.issuesDiv+' li').width();
  41. var heightIssue = $(settings.issuesDiv+' li').height();
  42. var widthDates = $(settings.datesDiv).width();
  43. var heightDates = $(settings.datesDiv).height();
  44. var widthDate = $(settings.datesDiv+' li').width();
  45. var heightDate = $(settings.datesDiv+' li').height();
  46. // set positions!
  47. if(settings.orientation == 'horizontal') {
  48. $(settings.issuesDiv).width(widthIssue*howManyIssues);
  49. $(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2);
  50. var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
  51. } else if(settings.orientation == 'vertical') {
  52. $(settings.issuesDiv).height(heightIssue*howManyIssues);
  53. $(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2);
  54. var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
  55. }
  56. $(settings.datesDiv+' a').click(function(event){
  57. event.preventDefault();
  58. // first vars
  59. var whichIssue = $(this).text();
  60. var currentIndex = $(this).parent().prevAll().length;
  61. // moving the elements
  62. if(settings.orientation == 'horizontal') {
  63. $(settings.issuesDiv).animate({'marginLeft':-widthIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
  64. } else if(settings.orientation == 'vertical') {
  65. $(settings.issuesDiv).animate({'marginTop':-heightIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
  66. }
  67. $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1);
  68. // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows | bugfixed: arrows not showing when jumping from first to last date
  69. if(howManyDates == 1) {
  70. $(settings.prevButton+','+settings.nextButton).fadeOut('fast');
  71. } else if(howManyDates == 2) {
  72. if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
  73. $(settings.prevButton).fadeOut('fast');
  74. $(settings.nextButton).fadeIn('fast');
  75. }
  76. else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
  77. $(settings.nextButton).fadeOut('fast');
  78. $(settings.prevButton).fadeIn('fast');
  79. }
  80. } else {
  81. if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
  82. $(settings.nextButton).fadeIn('fast');
  83. $(settings.prevButton).fadeOut('fast');
  84. }
  85. else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
  86. $(settings.prevButton).fadeIn('fast');
  87. $(settings.nextButton).fadeOut('fast');
  88. }
  89. else {
  90. $(settings.nextButton+','+settings.prevButton).fadeIn('slow');
  91. }
  92. }
  93. // now moving the dates
  94. $(settings.datesDiv+' a').removeClass(settings.datesSelectedClass);
  95. $(this).addClass(settings.datesSelectedClass);
  96. if(settings.orientation == 'horizontal') {
  97. $(settings.datesDiv).animate({'marginLeft':defaultPositionDates-(widthDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'});
  98. } else if(settings.orientation == 'vertical') {
  99. $(settings.datesDiv).animate({'marginTop':defaultPositionDates-(heightDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'});
  100. }
  101. });
  102. $(settings.nextButton).bind('click', function(event){
  103. event.preventDefault();
  104. // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
  105. var currentIndex = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass).index();
  106. if(settings.orientation == 'horizontal') {
  107. var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
  108. var currentIssueIndex = currentPositionIssues/widthIssue;
  109. var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
  110. var currentIssueDate = currentPositionDates-widthDate;
  111. if(currentPositionIssues <= -(widthIssue*howManyIssues-(widthIssue))) {
  112. $(settings.issuesDiv).stop();
  113. $(settings.datesDiv+' li:last-child a').click();
  114. } else {
  115. if (!$(settings.issuesDiv).is(':animated')) {
  116. // bugixed from 0.9.52: now the dates gets centered when there's too much dates.
  117. $(settings.datesDiv+' li').eq(currentIndex+1).find('a').trigger('click');
  118. }
  119. }
  120. } else if(settings.orientation == 'vertical') {
  121. var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
  122. var currentIssueIndex = currentPositionIssues/heightIssue;
  123. var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
  124. var currentIssueDate = currentPositionDates-heightDate;
  125. if(currentPositionIssues <= -(heightIssue*howManyIssues-(heightIssue))) {
  126. $(settings.issuesDiv).stop();
  127. $(settings.datesDiv+' li:last-child a').click();
  128. } else {
  129. if (!$(settings.issuesDiv).is(':animated')) {
  130. // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
  131. $(settings.datesDiv+' li').eq(currentIndex+1).find('a').trigger('click');
  132. }
  133. }
  134. }
  135. // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows
  136. if(howManyDates == 1) {
  137. $(settings.prevButton+','+settings.nextButton).fadeOut('fast');
  138. } else if(howManyDates == 2) {
  139. if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
  140. $(settings.prevButton).fadeOut('fast');
  141. $(settings.nextButton).fadeIn('fast');
  142. }
  143. else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
  144. $(settings.nextButton).fadeOut('fast');
  145. $(settings.prevButton).fadeIn('fast');
  146. }
  147. } else {
  148. if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
  149. $(settings.prevButton).fadeOut('fast');
  150. }
  151. else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
  152. $(settings.nextButton).fadeOut('fast');
  153. }
  154. else {
  155. $(settings.nextButton+','+settings.prevButton).fadeIn('slow');
  156. }
  157. }
  158. });
  159. $(settings.prevButton).click(function(event){
  160. event.preventDefault();
  161. // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
  162. var currentIndex = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass).index();
  163. if(settings.orientation == 'horizontal') {
  164. var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
  165. var currentIssueIndex = currentPositionIssues/widthIssue;
  166. var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
  167. var currentIssueDate = currentPositionDates+widthDate;
  168. if(currentPositionIssues >= 0) {
  169. $(settings.issuesDiv).stop();
  170. $(settings.datesDiv+' li:first-child a').click();
  171. } else {
  172. if (!$(settings.issuesDiv).is(':animated')) {
  173. // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
  174. $(settings.datesDiv+' li').eq(currentIndex-1).find('a').trigger('click');
  175. }
  176. }
  177. } else if(settings.orientation == 'vertical') {
  178. var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
  179. var currentIssueIndex = currentPositionIssues/heightIssue;
  180. var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
  181. var currentIssueDate = currentPositionDates+heightDate;
  182. if(currentPositionIssues >= 0) {
  183. $(settings.issuesDiv).stop();
  184. $(settings.datesDiv+' li:first-child a').click();
  185. } else {
  186. if (!$(settings.issuesDiv).is(':animated')) {
  187. // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
  188. $(settings.datesDiv+' li').eq(currentIndex-1).find('a').trigger('click');
  189. }
  190. }
  191. }
  192. // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows
  193. if(howManyDates == 1) {
  194. $(settings.prevButton+','+settings.nextButton).fadeOut('fast');
  195. } else if(howManyDates == 2) {
  196. if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
  197. $(settings.prevButton).fadeOut('fast');
  198. $(settings.nextButton).fadeIn('fast');
  199. }
  200. else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
  201. $(settings.nextButton).fadeOut('fast');
  202. $(settings.prevButton).fadeIn('fast');
  203. }
  204. } else {
  205. if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
  206. $(settings.prevButton).fadeOut('fast');
  207. }
  208. else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
  209. $(settings.nextButton).fadeOut('fast');
  210. }
  211. else {
  212. $(settings.nextButton+','+settings.prevButton).fadeIn('slow');
  213. }
  214. }
  215. });
  216. // keyboard navigation, added since 0.9.1
  217. if(settings.arrowKeys=='true') {
  218. if(settings.orientation=='horizontal') {
  219. $(document).keydown(function(event){
  220. if (event.keyCode == 39) {
  221. $(settings.nextButton).click();
  222. }
  223. if (event.keyCode == 37) {
  224. $(settings.prevButton).click();
  225. }
  226. });
  227. } else if(settings.orientation=='vertical') {
  228. $(document).keydown(function(event){
  229. if (event.keyCode == 40) {
  230. $(settings.nextButton).click();
  231. }
  232. if (event.keyCode == 38) {
  233. $(settings.prevButton).click();
  234. }
  235. });
  236. }
  237. }
  238. // default position startAt, added since 0.9.3
  239. $(settings.datesDiv+' li').eq(settings.startAt-1).find('a').trigger('click');
  240. // autoPlay, added since 0.9.4
  241. if(settings.autoPlay == 'true') {
  242. setInterval("autoPlay()", settings.autoPlayPause);
  243. }
  244. });
  245. };
  246. // autoPlay, added since 0.9.4
  247. function autoPlay(){
  248. var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
  249. if(settings.autoPlayDirection == 'forward') {
  250. if(currentDate.parent().is('li:last-child')) {
  251. $(settings.datesDiv+' li:first-child').find('a').trigger('click');
  252. } else {
  253. currentDate.parent().next().find('a').trigger('click');
  254. }
  255. } else if(settings.autoPlayDirection == 'backward') {
  256. if(currentDate.parent().is('li:first-child')) {
  257. $(settings.datesDiv+' li:last-child').find('a').trigger('click');
  258. } else {
  259. currentDate.parent().prev().find('a').trigger('click');
  260. }
  261. }
  262. }