SHARE
TWEET

Auto-slide Twenty Eleven Featured Posts with pause on hover

RavanH May 28th, 2012 172 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* * *
  2.  * Auto-slide the Twenty Eleven Featured Posts Slider v2
  3.  * with pause on mouse hover over featured content.
  4.  * By RavanH -- http://4visions.nl/?p=1001 --
  5.  * Special thanks to Tim Down's setTimeout wrapper script
  6.  * http://stackoverflow.com/a/3969760/573224
  7.  *
  8.  * Paste code in a text widget in the Showcase Sidebar.
  9.  * Adapt variables 'slide_speed' and 'slide_delay' to change
  10.  * the slider effect and timeout speed in milliseconds.
  11.  * The variable 'slide_delay_first' is meant for the first
  12.  * timeout during which page elements like images are still
  13.  * loading which usually needs some extra time while
  14.  * slide_effect and slide_easing control more advanced slider
  15.  * behaviour. Read the instructions for available options.
  16.  */
  17. (function($) {
  18.   var slide_delay = 5000; /* timeouts in ms */
  19.   var slide_speed = 300; /* effect speed in ms */
  20.   var slide_delay_first = 6000; /* first timeout in ms */
  21.   var slide_effect = 'slide'; /* available options are 'slide', 'fade' or '' (default) */
  22.   var slide_easing = 'swing'; /* available options are  'linear' or 'swing' (default) */
  23.  
  24.   var slide_timer = new Timer(function(){slide_goOut($('section.featured-post').filter(':visible'));},slide_delay_first);
  25.   $('section.featured-post').hover(function(){slide_timer.pause();},function(){slide_timer.resume();}).slice(1).css('display', 'none');
  26.  
  27.   $('.feature-slider a').click(function() {
  28.     slide_timer.clear();
  29.     slide_goIn(this.hash);
  30.   });
  31.  
  32.   function slide_goIn(id) {
  33.     if (slide_effect == 'slide') {
  34.       $(id).slideDown(slide_speed, slide_easing, function(){slide_timer = new Timer(function(){slide_goOut(id);},slide_delay);} );
  35.     } else if (slide_effect == 'fade') {
  36.        $(id).fadeIn(slide_speed, slide_easing, function(){slide_timer = new Timer(function(){slide_goOut(id);},slide_delay);} );
  37.     } else {
  38.       $(id).show(slide_speed, slide_easing, function(){slide_timer = new Timer(function(){slide_goOut(id);},slide_delay);} );
  39.     }
  40.   }
  41.  
  42.   function slide_goOut(id) {
  43.     var next_link = $('nav.feature-slider a.active').parent().next().children().first();
  44.     if (next_link.length == 0) {
  45.       next_link = $('nav.feature-slider a').first();
  46.     }
  47.     if (next_link.length !== 0) {
  48.       if (slide_effect == 'slide') {
  49.         $(id).slideUp(slide_speed, slide_easing, function(){next_link.trigger('click');});
  50.       } else if (slide_effect == 'fade') {
  51.         $(id).fadeOut(slide_speed, slide_easing, function(){next_link.trigger('click');});
  52.       } else {
  53.         $(id).hide(slide_speed, slide_easing, function(){next_link.trigger('click');});
  54.       }
  55.     }
  56.   }
  57.  
  58.   function Timer(callback,delay) {
  59.     var timerid, start, remaining = delay;
  60.     this.clear = function() {
  61.       window.clearTimeout(timerid);
  62.    }
  63.     this.pause = function() {
  64.       this.clear();
  65.       remaining -= new Date() - start;
  66.     };
  67.     this.resume = function() {
  68.       this.clear(); /* make sure we are not resuming without having cleared */
  69.       start = new Date();
  70.       timerid = window.setTimeout(callback, remaining);
  71.     };
  72.     this.resume();
  73.   }
  74. })(jQuery);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top