/jQueryPresentation/Scripts/jquery.presentation-full.js

https://github.com/srkirkland/jQueryPresentation · JavaScript · 151 lines · 97 code · 22 blank · 32 comment · 13 complexity · 1468ae5d2849acb070b36b42b0ff5c01 MD5 · raw file

  1. /*
  2. * Presentation Plugin
  3. * http://www.viget.com/
  4. *
  5. * Copyright (c) 2010 Trevor Davis
  6. * Dual licensed under the MIT and GPL licenses.
  7. * Uses the same license as jQuery, see:
  8. * http://jquery.org/license
  9. *
  10. * @version 0.2
  11. *
  12. * Example usage:
  13. * $('#slides').presentation({
  14. * slide: '.slide',
  15. * pagerClass: 'nav-pager',
  16. * prevNextClass: 'nav-prev-next',
  17. * prevText: 'Previous',
  18. * nextText: 'Next',
  19. * transition: 'fade'
  20. * });
  21. */
  22. (function($) {
  23. $.fn.presentation = function(options) {
  24. var config = {
  25. slide: '.slide',
  26. pagerClass: 'nav-pager',
  27. prevNextClass: 'nav-prev-next',
  28. prevText: 'Previous',
  29. nextText: 'Next',
  30. transition: "fade"
  31. };
  32. $(this).each(function() {
  33. var $presentation = $(this);
  34. $presentation.count = 1;
  35. //Control the changing of the slide
  36. $presentation.changeSlide = function(newSlide) {
  37. $presentation.visibleSlide = $presentation.slides.filter(':visible');
  38. $presentation.slideToShow = $presentation.slides.filter(':nth-child('+newSlide+')')
  39. switch ($presentation.options.transition) {
  40. case 'show/hide':
  41. $presentation.visibleSlide.hide();
  42. $presentation.slideToShow.show();
  43. break;
  44. case 'slide':
  45. $presentation.visibleSlide.slideUp(500, function () {
  46. $presentation.slideToShow.slideDown(1000)
  47. });
  48. break;
  49. default:
  50. $presentation.visibleSlide.fadeOut(500);
  51. $presentation.slideToShow.fadeIn(500)
  52. }
  53. $presentation.find('.'+$presentation.options.pagerClass).children('.current').removeClass('current');
  54. $presentation.find('.'+$presentation.options.pagerClass).children(':nth-child('+newSlide+')').addClass('current');
  55. };
  56. //Handle clicking of a specific slide
  57. $presentation.pageClick = function($pager) {
  58. if(!$pager.parent().hasClass('current')) {
  59. $presentation.changeSlide($pager.parent().prevAll().length + 1);
  60. $presentation.count = $pager.parent().prevAll().length + 1;
  61. }
  62. };
  63. //Handle the previous and next functionality
  64. $presentation.prevNextClick = function(action) {
  65. if(action === 'prev') {
  66. $presentation.count === 1 ? $presentation.count = $presentation.slides.length : $presentation.count--;
  67. } else {
  68. $presentation.count === $presentation.slides.length ? $presentation.count = 1 : $presentation.count++;
  69. }
  70. $presentation.changeSlide($presentation.count);
  71. window.location.hash = '#'+$presentation.count;
  72. };
  73. $presentation.addControls = function() {
  74. $presentation.numSlides = $presentation.slides.length;
  75. //Add in the pager
  76. var navPager = '<ol class="'+$presentation.options.pagerClass+'">';
  77. for(var i = 1; i < $presentation.numSlides+1; i++) {
  78. navPager += '<li><a href="#'+i+'">'+i+'</a></li>';
  79. }
  80. $presentation.append(navPager);
  81. if($presentation.currentHash) {
  82. $presentation.find('.'+$presentation.options.pagerClass).children(':nth-child('+$presentation.currentHash+')').addClass('current');
  83. $presentation.count = $presentation.currentHash;
  84. } else {
  85. $presentation.find('.'+$presentation.options.pagerClass).children(':first-child').addClass('current');
  86. $presentation.count = 1;
  87. }
  88. //Add in the previous/next links
  89. $presentation.append('<ul class="'+$presentation.options.prevNextClass+'"><li><a href="#prev" class="prev">'+$presentation.options.prevText+'</a></li><li><a href="#next" class="next">'+$presentation.options.nextText+'</a></li>');
  90. //When a specific page is clicked, go to that page
  91. $presentation.find('.'+$presentation.options.pagerClass).find('a').bind('click', function() {
  92. $presentation.pageClick($(this));
  93. });
  94. //When you click a previous/next link
  95. $presentation.find('.'+$presentation.options.prevNextClass).find('a').click(function() {
  96. $presentation.prevNextClick($(this).attr('class'));
  97. return false;
  98. });
  99. //When you hit the left arrow, go to previous slide
  100. //When you hit the right arrow, go to next slide
  101. $(document).keyup(function(e) {
  102. var action = '';
  103. if(e.keyCode === 37) {
  104. action = 'prev';
  105. } else if(e.keyCode === 39) {
  106. action = 'next';
  107. }
  108. if(action !== '') {
  109. $presentation.prevNextClick(action);
  110. }
  111. });
  112. };
  113. //Start this thing
  114. $presentation.init = function() {
  115. $presentation.options = $.extend(config, options);
  116. $presentation.slides = $presentation.find($presentation.options.slide);
  117. $presentation.currentHash = window.location.hash.substr(1);
  118. //Hide everything except the hash or the first
  119. if($presentation.currentHash) {
  120. $presentation.slides.filter(':not(:nth-child('+$presentation.currentHash+'))').hide();
  121. } else {
  122. $presentation.slides.filter(':not(:first)').hide();
  123. }
  124. $presentation.addControls();
  125. };
  126. $presentation.init();
  127. });
  128. };
  129. })(jQuery);