View difference between Paste ID: GeC4AwUy and SLy8ND2k
SHOW: | | - or go back to the newest paste.
1
/* * *
2-
 * Auto-slide the Twenty Eleven Featured Posts Slider
2+
 * Auto-slide the Twenty Eleven Featured Posts Slider v2
3-
 * by RavanH -- http://4visions.nl/?p=1001 --
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_timeout;
20+
21-
  $('section.featured-post').slice(1).css('display', 'none');
21+
22-
  slide_setTimeout(slide_delay_first, $('nav.feature-slider a.active').parent().next().children().first() );
22+
23
24
  var slide_timer = new Timer(function(){slide_goOut($('section.featured-post').filter(':visible'));},slide_delay_first);
25-
    window.clearTimeout(slide_timeout);
25+
  $('section.featured-post').hover(function(){slide_timer.pause();},function(){slide_timer.resume();}).slice(1).css('display', 'none');
26-
    if (slide_effect == 'fade') {
26+
27-
       $(this.hash).css({ display: 'none', opacity: 1, visibility: 'visible' }).fadeIn(slide_speed, slide_easing, slide_setTimeout(slide_delay, $(this).parent().next().children().first()) );
27+
28-
    } else if (slide_effect == 'slide') {
28+
    slide_timer.clear();
29-
      $(this.hash).css({ display: 'none', opacity: 1, visibility: 'visible' }).slideDown(slide_speed, slide_easing, slide_setTimeout(slide_delay, $(this).parent().next().children().first()) );
29+
    slide_goIn(this.hash);
30
  });
31-
      $(this.hash).css({ display: 'none', opacity: 1, visibility: 'visible' }).show(slide_speed, slide_easing, slide_setTimeout(slide_delay, $(this).parent().next().children().first()) );
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-
  function slide_setTimeout(delay, next_link) {
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-
      if (slide_effect == 'fade') {
40+
41-
        slide_timeout = window.setTimeout(function(){$('section.featured-post').filter(':visible').fadeOut(slide_speed, slide_easing, function(){next_link.trigger('click');});}, delay);
41+
42-
      } else if (slide_effect == 'slide') {
42+
  function slide_goOut(id) {
43-
        slide_timeout = window.setTimeout(function(){$('section.featured-post').filter(':visible').slideUp(slide_speed, slide_easing, function(){next_link.trigger('click');});}, delay);
43+
    var next_link = $('nav.feature-slider a.active').parent().next().children().first();
44
    if (next_link.length == 0) {
45-
        slide_timeout = window.setTimeout(function(){$('section.featured-post').filter(':visible').hide(slide_speed, slide_easing, function(){next_link.trigger('click');});}, delay);
45+
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);