Code + Download

Features

• Auto-rotate through all the slides with extra options
  • Pause on hover
  • Stop rotation on click of a slide
  • Option to stop rotation at the end of the slides
• Options for setting delay, animation speed and easing
• Ability to set active slide onload using hashes (index.html#panel1-3)
• Works with multiple instances on the page
• Ability to specify width of active slide while automatically adjusting inactive slides
• You can now do <li data-bg="path/to/bg1.jpg"> on each cell and the image will be added via js! However, hardcoding the images reduces FOUC

Usage & Options (Defaults)

Requires jQuery

$('.accordion').eAccordion({
	easing: 'swing',	// Anything other than "linear" or "swing" requires the easing plugin
	autoPlay: true,		// This turns off the entire FUNCTIONALY, not just if it starts running or not
	startStopped: false,	// If autoPlay is on, this can force it to start stopped
	stopAtEnd: false,	// If autoplay is on, it will stop when it reaches the last slide
	delay: 4000,		// How long between slide transitions in AutoPlay mode
	animationTime: 100, // How long the slide transition takes
	hashTags: true,		// Should links change the hashtag in the URL?
	pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
	height: null,		// Override the default CSS height
	expandedWidth: '60%',	// Width of the expanded slide
	neutralState: false // If there should be a state when all pages are equal size (usually onMouseOut)
	bgHeight: '340px'	// The height of the gradient image (bgDescription.png). Useful if you're modifying the image
});

Linking directly to slides

$("#slide-jump").click(function(){
	$('.accordion').eq(1).eAccordion(4);
});

Changelog

Version 0.3

• Added bgHeight option so you can modify the gradient background image
• Fixed neutralState
• Reverted back to hardcoded animations (for now). Fixes IE7 animations. Reduced # of animations for brevity
• Dropped jQuery UI dependency (due to above changes)
• OPTIONAL: You can now do <li data-bg="path/to/bg1.jpg"> on each cell and the image will be added via js! Old solution will reduce FOUC however

Version 0.2.1

• Tweaked example code so that the background image doesn't slide around in IE7
• Added filter:opacity() to support IE7. Opacity animations are still not supported yet.
• Removed vestigial code from previous version
• TODO: Still need to refactor how elements are animated. This will squash multiple bugs at once.

Version 0.2

• Relies on UI, but animations are done with classes now (more flexibility/customization)
• More efficient description gradient animation handling
• autoPlay fixed
• Flexible width control (width param dropped)
• TODO: drop 'efficient' toggle and use a more optimized approach
• BUG: neutralState isn't working properly

Version 0.1

• Turned into a jQuery plugin (using AnythingSlider as a base)
• Greatly refactored css/html markup required to generate the effect
• Added options to specify transition times and effects and other options
• Created an auto-rotation behavior
• Installed default loaded slide behavior using hashtags