SHOW:
|
|
- or go back to the newest paste.
| 1 | /*<script type="text/javascript" charset="utf-8">*/ | |
| 2 | /* * * | |
| 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 | * loading which usually needs some extra time while | |
| 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 | * Read the instructions next to the available options. | |
| 20 | - | */ |
| 20 | + | |
| 21 | * Set these parameters before calling this script: | |
| 22 | - | /* change these settings to your liking */ |
| 22 | + | |
| 23 | - | var slide_delay = 5000; /* timeouts in ms */ |
| 23 | + | /* var slide_delay = 5000; /* timeouts in ms */ |
| 24 | - | var slide_delay_first = 6000; /* first timeout in ms */ |
| 24 | + | /* var slide_delay_first = 6000; /* first timeout in ms */ |
| 25 | - | var slide_effect = 'slide'; /* available options are 'slide', 'fade' or '' (default) */ |
| 25 | + | /* var slide_effect = 'slide'; /* available options are 'slide', 'fade' or '' (default) */ |
| 26 | - | var slide_easing = 'swing'; /* available options are 'linear' or 'swing' */ |
| 26 | + | /* var slide_easing = 'swing'; /* available options are 'linear' or 'swing' */ |
| 27 | - | var slide_speed = 300; /* slide effect speed in ms */ |
| 27 | + | /* var slide_speed = 300; /* slide effect speed in ms */ |
| 28 | - | var slide_precursor_time = 1250 ; /* precursor blinking time in ms (0 is OFF) */ |
| 28 | + | /* var slide_precursor_time = 1250 ; /* precursor blinking time in ms (0 is OFF) */ |
| 29 | - | var slide_precursor_speed = 300; /* precursor blink speed in ms */ |
| 29 | + | /* var slide_precursor_speed = 300; /* precursor blink speed in ms */ |
| 30 | ||
| 31 | (function($) {
| |
| 32 | /* do not edit below here, unless you know what you're doing */ | |
| 33 | var slide_precursor_timer = new Timer(function(){slide_preCursor($('nav.feature-slider a.active').parent().next().children().first());},slide_delay_first-slide_precursor_time);
| |
| 34 | 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);
| |
| 35 | ||
| 36 | $('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');
| |
| 37 | ||
| 38 | $('.feature-slider a').click(function() {
| |
| 39 | slide_precursor_timer.clear(); | |
| 40 | slide_timer.clear(); | |
| 41 | var obj = $(this.hash); | |
| 42 | obj.css('opacity',1);
| |
| 43 | var next_link = $(this).parent().next().children().first(); | |
| 44 | if (next_link.length == 0) {
| |
| 45 | next_link = $('nav.feature-slider a').first();
| |
| 46 | } | |
| 47 | if (slide_effect == 'slide') {
| |
| 48 | 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);} );
| |
| 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);} );
|
| 49 | + | |
| 50 | 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);} );
| |
| 51 | } else {
| |
| 52 | 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);} );
| |
| 53 | } | |
| 54 | }); | |
| 55 | ||
| 56 | function slide_goOut(obj,link) {
| |
| 57 | slide_precursor_timer.clear(); | |
| 58 | if (link.length !== 0) {
| |
| 59 | if (slide_effect == 'slide') {
| |
| 60 | obj.slideUp(slide_speed, slide_easing, function(){link.trigger('click');});
| |
| 61 | } else if (slide_effect == 'fade') {
| |
| 62 | obj.fadeOut(slide_speed, slide_easing, function(){link.trigger('click');});
| |
| 63 | } else {
| |
| 64 | obj.hide(slide_speed, slide_easing, function(){link.trigger('click');});
| |
| 65 | } | |
| 66 | } | |
| 67 | } | |
| 68 | ||
| 69 | function slide_preCursor(link) {
| |
| 70 | slide_precursor_timer.clear(); | |
| 71 | slide_precursor_timer = new Timer(function(){slide_preCursor(link);},slide_precursor_speed);
| |
| 72 | link.toggleClass('active');
| |
| 73 | } | |
| 74 | ||
| 75 | function Timer(callback,delay) {
| |
| 76 | var timerid, start, remaining = delay; | |
| 77 | this.clear = function() {
| |
| 78 | window.clearTimeout(timerid); | |
| 79 | } | |
| 80 | this.pause = function() {
| |
| 81 | this.clear(); | |
| 82 | remaining -= new Date() - start; | |
| 83 | }; | |
| 84 | this.resume = function() {
| |
| 85 | this.clear(); /* make sure we are not resuming without having cleared */ | |
| 86 | start = new Date(); | |
| 87 | timerid = window.setTimeout(callback, remaining); | |
| 88 | }; | |
| 89 | this.resume(); | |
| 90 | } | |
| 91 | })(jQuery); | |
| 92 | /*</script>*/ |