Posted By

LukeLux on 03/27/11


Tagged

textmate jquery slider responsive


Versions (?)

Responsive Slider


 / Published in: Other
 

  1. $(function(){
  2. // RESPONSIVE SLIDER
  3. $.fn.slider = function(options) {
  4.  
  5. var settings = $.extend({
  6. auto: true,
  7. infinite: true,
  8. showNav: true,
  9. wait: 5000,
  10. animation: 'fadeIn',
  11. animation_func: 'reveal',
  12. animations: {
  13. reveal: function($current, $next, options) {
  14. var anim_settings = $.extend({
  15. speed: 500
  16. }, options);
  17.  
  18. function post_animate() {
  19. $(this).removeClass('next')
  20. .addClass('current')
  21. .removeAttr('style')
  22. .css('zoom', 1);
  23.  
  24. // remove .current form previous item
  25. var $parent = $current.parent();
  26. // $current.remove().removeClass('current').appendTo($parent);
  27. $current.removeClass('current');
  28. }
  29. $next[settings.animation](anim_settings.speed, post_animate);
  30. },
  31. slide: function($current, $next, options) {
  32. var anim_settings = $.extend({
  33. speed: 2000
  34. }, options);
  35.  
  36. function post_animate_next() {
  37. $(this).removeClass('next sliding')
  38. .addClass('current')
  39. .removeAttr('style')
  40. .css('zoom', 1);
  41.  
  42. // remove .current form previous item
  43. var $parent = $current.parent();
  44. $current.removeClass('current');
  45. }
  46.  
  47. function post_animate_current() {
  48. $(this).removeClass('sliding')
  49. .removeAttr('style');
  50. }
  51.  
  52. $current.addClass('sliding').animate({
  53. left: -1 * $current.width()
  54. }, anim_settings.speed, post_animate_current);
  55.  
  56. $next.addClass('sliding').animate({
  57. marginLeft: -1 * $current.width()
  58. }, anim_settings.speed, post_animate_next);
  59. }
  60. }
  61. },
  62. options);
  63.  
  64.  
  65. function _animate($current, $next, f) {
  66. // call the custom animation function
  67. settings.animations[settings.animation_func]($current, $next, options);
  68.  
  69. // run the callback
  70. if (typeof(f) === 'function') {
  71. f();
  72. }
  73. }
  74.  
  75. function _swap($container, $next) {
  76. var $current = $container.find('.current'),
  77. $controls = $('.swap-controls');
  78.  
  79. // unless a next is specified, grab the next item available
  80. // using $next = $next || ternary here wouldn't wortk in iOS - weird??
  81. if (!$next) {
  82. $next = $current.next().length ? $current.next() : $container.children(':first-child');
  83. }
  84.  
  85. // alert($('.slider').html());
  86. // Fix the height of the container during the animation to prevent jumping
  87. //$container.data('savedHeight', $container[0].height).height($current.height(true));
  88. $container.height($current.height(true));
  89.  
  90. $next.addClass('next');
  91.  
  92. // Run custom animation function
  93. _animate($current, $next, function() {
  94. $container.height('auto');
  95.  
  96. // set current item indicator
  97. if ($controls.length) {
  98. $controls.find('.current').removeClass('current');
  99. $controls.find('[data-item=' + $next.data('item') + ']').parent().addClass('current');
  100. }
  101. });
  102. }
  103.  
  104.  
  105. return this.each(function() {
  106. var $self = $(this),
  107. timer;
  108.  
  109. // Setup
  110. $self.children(':first-child').addClass('current');
  111. $self.children().each(function(i) {
  112. $(this).attr('data-item', i);
  113. });
  114.  
  115. if (settings.showNav) {
  116. $self.wrap('<div class="slider-container"/>');
  117. var $container = $self.parent(),
  118. controls = '<div class="swap-controls"><ol style="left: ' + (-20 * $self.find('li').length / 2) + 'px">',
  119. current = ' current';
  120.  
  121. // Create current item links
  122. $self.find('li').each(function(i) {
  123. controls += '<li class="swap-button ' + current + '"><a href="#" data-item="' + i + '">' + i + '</a></li>';
  124. current = '';
  125. });
  126. controls += "</ol></div>";
  127.  
  128. // Append everything to the DOM
  129. $container.prepend('<a href="." class="slider-prev">prev</a>' + controls + '<a href="." class="slider-next">next</a>');
  130.  
  131. $('.swap-button').find('a').bind('click', function(e) {
  132. _swap($self, $self.children('[data-item=' + $(e.target).data('item') +']'));
  133. clearInterval(timer);
  134. e.preventDefault();
  135. });
  136. $('.slider-next').bind('click', function(e) {
  137.  
  138. var $next = $self.children('.current').next().length ?
  139. $self.children('.current').next() :
  140. $self.children(':first-child');
  141.  
  142. _swap($self, $next);
  143. clearInterval(timer);
  144. e.preventDefault();
  145. });
  146. $('.slider-prev').bind('click', function(e) {
  147.  
  148. var $prev = $self.children('.current').prev().length ?
  149. $self.children('.current').prev() :
  150. $self.children(':last-child');
  151.  
  152. _swap($self, $prev);
  153. clearInterval(timer);
  154. e.preventDefault();
  155. });
  156. }
  157.  
  158. // Set up auto scroll
  159. if (settings.auto) {
  160. timer = setInterval(function() {
  161. _swap($self);
  162. }, settings.wait);
  163. }
  164.  
  165. });
  166.  
  167. };
  168. })(jQuery);// end jquery

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: livingos on May 10, 2011

This looks really useful. Can I use this in a WordPress theme I am working on? Have you published any docs for this plugin?

You need to login to post a comment.