SHOW:
|
|
- or go back to the newest paste.
1 | /*<script type="text/javascript" charset="utf-8">*/ | |
2 | - | * Auto-slide the Twenty Eleven Featured Posts Slider v2 |
2 | + | |
3 | - | * with pause on mouse hover over featured content. |
3 | + | * Auto-slide the Twenty Eleven Featured Posts Slider v3.1 |
4 | * with pause on mouse hover over featured content and | |
5 | * slide precursor button blinking. | |
6 | * By RavanH -- http://4visions.nl/?p=1001 -- | |
7 | * Special thanks to Tim Down's setTimeout wrapper script | |
8 | * http://stackoverflow.com/a/3969760/573224 | |
9 | * | |
10 | * Paste code in a text widget in the Showcase Sidebar. | |
11 | * Adapt variables 'slide_speed' and 'slide_delay' to change | |
12 | * the slider effect and timeout speed in milliseconds. | |
13 | * The variable 'slide_delay_first' is meant for the first | |
14 | * timeout during which page elements like images are still | |
15 | - | * behaviour. Read the instructions for available options. |
15 | + | |
16 | * slide_effect and slide_easing control more advanced slider | |
17 | * behaviour. Change slide_precursor_time/speed to control | |
18 | * blinking of the upcoming slide dot (button). | |
19 | - | var slide_speed = 300; /* effect speed in ms */ |
19 | + | * Read the instructions next to the available options. |
20 | */ | |
21 | (function($) { | |
22 | - | var slide_easing = 'swing'; /* available options are 'linear' or 'swing' (default) */ |
22 | + | /* change these settings to your liking */ |
23 | var slide_delay = 5000; /* timeouts in ms */ | |
24 | - | var slide_timer = new Timer(function(){slide_goOut($('section.featured-post').filter(':visible'));},slide_delay_first); |
24 | + | |
25 | - | $('section.featured-post').hover(function(){slide_timer.pause();},function(){slide_timer.resume();}).slice(1).css('display', 'none'); |
25 | + | |
26 | var slide_easing = 'swing'; /* available options are 'linear' or 'swing' */ | |
27 | var slide_speed = 300; /* slide effect speed in ms */ | |
28 | var slide_precursor_time = 1250 ; /* precursor blinking time in ms (0 is OFF) */ | |
29 | - | slide_goIn(this.hash); |
29 | + | var slide_precursor_speed = 300; /* precursor blink speed in ms */ |
30 | ||
31 | /* do not edit below here, unless you know what you're doing */ | |
32 | - | function slide_goIn(id) { |
32 | + | var slide_precursor_timer = new Timer(function(){slide_preCursor($('nav.feature-slider a.active').parent().next().children().first());},slide_delay_first-slide_precursor_time); |
33 | var slide_timer = new Timer(function(){slide_goOut($('section.featured-post').filter(':visible'),$('nav.feature-slider a.active').parent().next().children().first());},slide_delay_first); | |
34 | - | $(id).slideDown(slide_speed, slide_easing, function(){slide_timer = new Timer(function(){slide_goOut(id);},slide_delay);} ); |
34 | + | |
35 | $('section.featured-post').hover(function(){slide_precursor_timer.pause();slide_timer.pause();},function(){slide_precursor_timer.resume();slide_timer.resume();}).slice(1).css('display','none'); | |
36 | - | $(id).fadeIn(slide_speed, slide_easing, function(){slide_timer = new Timer(function(){slide_goOut(id);},slide_delay);} ); |
36 | + | |
37 | $('.feature-slider a').click(function() { | |
38 | - | $(id).show(slide_speed, slide_easing, function(){slide_timer = new Timer(function(){slide_goOut(id);},slide_delay);} ); |
38 | + | slide_precursor_timer.clear(); |
39 | slide_timer.clear(); | |
40 | var obj = $(this.hash); | |
41 | obj.css('opacity',1); | |
42 | - | function slide_goOut(id) { |
42 | + | var next_link = $(this).parent().next().children().first(); |
43 | - | var next_link = $('nav.feature-slider a.active').parent().next().children().first(); |
43 | + | |
44 | next_link = $('nav.feature-slider a').first(); | |
45 | } | |
46 | if (slide_effect == 'slide') { | |
47 | - | if (next_link.length !== 0) { |
47 | + | obj.slideDown(slide_speed, slide_easing, function(){slide_precursor_timer.clear();slide_precursor_timer = new Timer(function(){slide_preCursor(next_link);},slide_delay-slide_precursor_time);slide_timer = new Timer(function(){slide_goOut(obj,next_link);},slide_delay);} ); |
48 | } else if (slide_effect == 'fade') { | |
49 | - | $(id).slideUp(slide_speed, slide_easing, function(){next_link.trigger('click');}); |
49 | + | obj.fadeIn(slide_speed, slide_easing, function(){slide_precursor_timer.clear();slide_precursor_timer = new Timer(function(){slide_preCursor(next_link);},slide_delay-slide_precursor_time);slide_timer = new Timer(function(){slide_goOut(obj,next_link);},slide_delay);} ); |
50 | } else { | |
51 | - | $(id).fadeOut(slide_speed, slide_easing, function(){next_link.trigger('click');}); |
51 | + | obj.show(slide_speed, slide_easing, function(){slide_precursor_timer.clear();slide_precursor_timer = new Timer(function(){slide_preCursor(next_link);},slide_delay-slide_precursor_time);slide_timer = new Timer(function(){slide_goOut(obj,next_link);},slide_delay);} ); |
52 | } | |
53 | - | $(id).hide(slide_speed, slide_easing, function(){next_link.trigger('click');}); |
53 | + | |
54 | ||
55 | function slide_goOut(obj,link) { | |
56 | slide_precursor_timer.clear(); | |
57 | if (link.length !== 0) { | |
58 | if (slide_effect == 'slide') { | |
59 | obj.slideUp(slide_speed, slide_easing, function(){link.trigger('click');}); | |
60 | } else if (slide_effect == 'fade') { | |
61 | obj.fadeOut(slide_speed, slide_easing, function(){link.trigger('click');}); | |
62 | } else { | |
63 | obj.hide(slide_speed, slide_easing, function(){link.trigger('click');}); | |
64 | } | |
65 | } | |
66 | } | |
67 | ||
68 | function slide_preCursor(link) { | |
69 | slide_precursor_timer.clear(); | |
70 | slide_precursor_timer = new Timer(function(){slide_preCursor(link);},slide_precursor_speed); | |
71 | link.toggleClass('active'); | |
72 | } | |
73 | ||
74 | - | })(jQuery); |
74 | + | |
75 | var timerid, start, remaining = delay; | |
76 | this.clear = function() { | |
77 | window.clearTimeout(timerid); | |
78 | } | |
79 | this.pause = function() { | |
80 | this.clear(); | |
81 | remaining -= new Date() - start; | |
82 | }; | |
83 | this.resume = function() { | |
84 | this.clear(); /* make sure we are not resuming without having cleared */ | |
85 | start = new Date(); | |
86 | timerid = window.setTimeout(callback, remaining); | |
87 | }; | |
88 | this.resume(); | |
89 | } | |
90 | })(jQuery); | |
91 | /*</script>*/ |