Setup

Demo | Playground | Home | Setup | Methods | Callbacks | Theming | Change

---

###Header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>

<link href="css/kwicks.css" rel="stylesheet">
<script src="js/jquery.kwicks.js"></script>

###HTML

<ul id="kwicks">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

###Script (showing all defaults)

$('#kwicks').kwicks({

  // *** Appearance ***
  max          : null,         // The width or height of a fully expanded kwick element
  min          : null,         // The width or height of a fully collapsed kwick element
  spacing      : 0,            // The width (in pixels) separating each kwick element

  isVertical   : false,        // Kwicks will align vertically if true

  sticky       : false,        // One kwick will always be expanded if true
  defaultKwick : 0,            // The initially expanded kwick (if and only if sticky is true). zero based

  activeClass  : 'active',     // Class added to active (open) kwick

  // *** Interaction ***
  event        : 'mouseenter', // The event that triggers the expand effect
  eventClose   : 'mouseleave', // The event that triggers the collapse effect

  // *** Functionality ***
  duration     : 500,          // The number of milliseconds required for each animation to complete
  easing       : 'swing',      // Custom animation easing (requires easing plugin if anything other than 'swing' or 'linear')

  // *** Slideshow ***
  showDuration : 2000,         // Slideshow duration
  showNext     : 1,            // set to 1 for left-to-right, -1 for right-to-left or 0 for a random slide

  // *** Callbacks ***
  initialized  : function(kwick){}, // event called when kwicks has been initialized
  init         : function(kwick){}, // event called when the event occurs (click or mouseover)
  expanding    : function(kwick){}, // event called before kwicks expanding animation begins
  collapsing   : function(kwick){}, // event called before kwicks collapsing animation begins
  completed    : function(kwick){}, // event called when animation completes
  playing      : function(kwick){}, // event called when slideshow starts
  paused       : function(kwick){}  // event called when slideshow ends

});