Advertisement
devon_zara

WP-TwentyEleven Automatic Slider - showcase.js

Dec 12th, 2011
803
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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.  
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement