zAccordion

Implementation

• HTML
• JavaScript

• The HTML is pretty straightforward. In the accordion above, I use an unordered list. Each list-item contains an image.

  											<ul id="featured">
  												<li>
  													<image src="diner.jpg" alt="Old School Diner" />
  												</li>
  												<li>
  													<image src="pool.jpg" alt="Vintage Pool" />
  												</li>
  												<li>
  													<image src="gas.jpg" alt="Retro Gas Pump" />
  												</li>
  												<li>
  													<image src="car.jpg" alt="Old Car Steering Wheel" />
  												</li>
  											</ul>
  										

• The JavaScript below builds the actual accordion.

  											$(document).ready(function() {
  												$("#featured").zAccordion({ 
  													easing: 'easeOutBounce',
  													timeout: 5500,
  													slideWidth: 600,
  													width: 900,
  													height: 310
  												});
  											});
  										

  												$(document).ready(function() {
  													$("#featured").zAccordion({ 
  														easing: 'easeOutBounce',
  														timeout: 5500,
  														slideWidth: 460,
  														width: 700,
  														height: 235
  													});
  												});
  											

Configuration

• Options
• Methods

• The plugin can be further customized by tweaking any of the options below:

  											timeout: 6000, /* Time between each slide (in ms). */
  											width: null, /* Width of the container. This option is required. */
  											slideWidth: null, /* Width of each slide in pixels or width of each slide compared to a 100% container. */
  											tabWidth: null, /* Width of each slide's "tab" (when clicked it opens the slide) or width of each tab compared to a 100% container. */
  											height: null, /* Height of the container. This option is required. */
  											startingSlide: 0, /* Zero-based index of which slide should be displayed. */
  											slideClass: null, /* Class prefix of each slide. If left null, no classes will be set. */
  											easing: null, /* Easing method. */
  											speed: 1200, /* Speed of the slide transition (in ms). */
  											auto: true, /* Whether or not the slideshow should play automatically. */
  											trigger: "click", /* Event type that will bind to the "tab" (click, mouseover, etc.). */
  											pause: true, /* Pause on hover. */
  											invert: false, /* Whether or not to invert the slideshow, so the last slide stays in the same position, rather than the first slide. */
  											animationStart: function () {}, /* Function called when animation starts. */
  											animationComplete: function () {}, /* Function called when animation completes. */
  											buildComplete: function () {}, /* Function called after the accordion is finished building. */
  											errors: false /* Display zAccordion specific errors. */
  										

• The plugin will also accept the following methods:

  											start /* Start the accordion. */
  											stop /* Stop the accordion. */
  											trigger /* Trigger a specific slide. */
  											destroy /* Destroys accordion, unbinds events, and removes styles. */
  										

For more information on using methods, please refer to the examples files included in the Download.