Pastebin launched a little side project called HostCabi.net, check it out ;-)Don't like ads? PRO users don't see any ads ;-)
Guest

WP-TwentyEleven Automatic Slider - showcase.js

By: devon_zara on Dec 12th, 2011  |  syntax: JavaScript  |  size: 3.16 KB  |  hits: 635  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. // Author: Devon Zara (http://devonzara.com)
  2. // Date: Dec. 11th, 2011
  3. // Description: Rewritten 'showcase.js' for the 'twentyeleven'
  4. // WordPress theme.
  5. // Version: 1.0b201112120044
  6. // ID: DZWPTEASC
  7. //
  8. // For the jQuery fade to function, you must remove, comment, or
  9. // over-rule the CSS3 animations in your stylesheet,
  10. // found next to the selectors:
  11. //         .featured-posts section.featured-post
  12. //
  13. // NOTE: All times are in miliseconds
  14. //       1000 miliseconds = 1 second
  15.  
  16. ( function( $ )
  17. {
  18.         $( document ).ready( function()
  19.         {
  20.                 // Automatic transitioning
  21.                 var useFadeshow = true;
  22.                 // Time between transitions
  23.                 var delay = 3000;
  24.                 // Length of transition
  25.                 var speed = 1000;
  26.                 // Toggle click delay
  27.                 var useClickDelay = true;
  28.                 // Delay when clicked
  29.                 var clickDelay = 5000;
  30.  
  31.                 // System variables
  32.                 var timer = null;
  33.                 var busy = false;
  34.                 var wasClicked = false;
  35.                 var queue = null;
  36.  
  37.                 // These next two lines do a few additional
  38.                 // resets to the CSS so that jQuery functions
  39.                 // properly.
  40.                 $( '.featured-posts section.featured-post' ).css({ display: 'none', visibility: 'visible', opacity: 1 });
  41.                 $( '.featured-posts #featured-post-1' ).show();
  42.  
  43.                 $('.feature-slider a').click( function( e ) {
  44.                         if( !busy )
  45.                         {
  46.                                 transition( e.target, this.hash );
  47.                                 wasClicked = true;
  48.                         }
  49.                         else
  50.                         {
  51.                                 queue = e.target;
  52.                         }
  53.                         e.preventDefault();
  54.                 });
  55.  
  56.                 function transition( target, hash )
  57.                 {
  58.                         busy = true;
  59.  
  60.                         // Stop the timer
  61.                         if( useFadeshow )
  62.                                 clearTimeout( timer );
  63.  
  64.                         // Do nothing if the same slide has been clicked
  65.                         if( $( '.feature-slider a.active' ).attr( 'href' ) != hash )
  66.                         {
  67.                                 // Do we have a valid target?
  68.                                 if( isNull( $( target ).attr( 'href' ) ) )
  69.                                 {
  70.                                         target = $( '.feature-slider a.active' ).parent().next().children( 'a:first' );
  71.  
  72.                                         // Was there a next sibling? If not, go to the first.
  73.                                         target = ( isNull( target ) ) ? $( '.feature-slider li:first a:first' ) : target;
  74.                                         hash = target.attr( 'href' );
  75.                                 }
  76.                                 else
  77.                                 {
  78.                                         target = $( target );
  79.                                 }
  80.  
  81.                                 prev = $( $( '.feature-slider a.active' ).attr( 'href' ) );
  82.  
  83.                                 // Change the buttons
  84.                                 $( '.feature-slider a.active' ).removeClass( 'active' );
  85.                                 target.addClass( 'active' );
  86.  
  87.                                 // Begin fading...
  88.                                 prev.fadeOut( speed );
  89.                                 $( hash ).fadeIn( speed, function() {
  90.                                         // Restart the timer
  91.                                         startTimer();
  92.                                 });
  93.                         }
  94.                         else
  95.                         {
  96.                                 startTimer();
  97.                         }
  98.                 }
  99.  
  100.                 function startTimer()
  101.                 {
  102.                         // Was this a click action and are we to wait?
  103.                         var thisDelay = ( wasClicked && useClickDelay ) ? clickDelay : delay;
  104.  
  105.                         if( queue == null )
  106.                         {
  107.                                 if( useFadeshow )
  108.                                         timer = setTimeout( transition, thisDelay );
  109.  
  110.                                 // Reset system vars
  111.                                 busy = false;
  112.                                 wasClicked = false;
  113.                         }
  114.                         else
  115.                         {
  116.                                 var target = queue;
  117.  
  118.                                 queue = null;
  119.                                 transition( target, $( target ).attr( 'href' ) );
  120.                         }
  121.                 }
  122.  
  123.                 function isNull( param )
  124.                 {
  125.                         try
  126.                         {
  127.                                 return ( typeof param[0] == 'undefined' || typeof param[0] == 'undefined' || param < 1 || !param ) ? true : false;
  128.                         }
  129.                         catch( err )
  130.                         {
  131.                                 return true;
  132.                         }
  133.                 }
  134.  
  135.                 startTimer();
  136.         });
  137. })( jQuery );
  138.