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); |