jquery.innerFade.js

Author: Wes Baker
Mail: wes@wesbaker.com
Web: http://wesbaker.com

Based on the work of Torsten Baldes http://medienfreunde.com, Matt Oakes http://portfolio.gizone.co.uk/applications/slideshow/ and Ralf S. Engelschall http://trainofthoughts.org/

What it Does

innerFade fades in/out content within a container. The general idea is to create something like a slideshow. This version extends the original with the ability to setup next and previous buttons.

When using the indexContainer selector, the currently visible index will have a class of 'active'.

Something Like What it'll be expecting

<ul id="news"> 
    <li>content 1</li>
    <li>content 2</li>
    <li>content 3</li>
</ul>

Usage

InnerFade

$('#news').innerFade({ 
	animationType: Type of animation 'fade', 'slide' or 'slideOver' (Default: 'fade'), 
	animate: Whether to animate the slideshow or not (Default: true),
	first_slide: The first slide that should be shown (Default: 0),
	speed: Fading-/Sliding-Speed in milliseconds or keywords (slow, normal or fast) (Default: 'normal'), 
	easing: Type of easing for slideOver. jQuery comes with 'linear' and 'swing', but you can use other plugins (Default: 'linear'),
	timeout: Time between the fades in milliseconds (Default: '2000'), 
	startDelay: Time before the first slide change (Default: '0'),
	loop: Whether to keep looping after the slideshow has gone through once (Default: true),
	type: Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'),

	containerHeight: Height of the containing element in any css-height-value (Default: 'auto'),
	runningClass: CSS Class which the container get’s applied (Default: 'innerfade'),
	children: optional children selector (Default: null),

	cancelLink: Optional cancel link selector (Default: null),
	pauseLink: Optional pause link selector (Default: null),
	prevLink: Optional previous link selector (Default: null),
	nextLink: Optional next link selector (Default: null),

	indexContainer: Optional index container selector, indexes are direct links to individual slides (Default: null),

	currentItemContainer: Optional container for the current item number (Default: null),
	totalItemsContainer: Optional container for the total item number (Default: null),
	
	callback_index_update: Optional callback that's fired after the indexes are updated. The first parameter of the function call is the index of the slide to show (Default: null)
});

InnerFadeTo

$('#news').innerFadeTo(slide_number);

InnerFadeTo allows you to change to a specific slide. slide_number is a zero indexed slide number. For example, if you wanted to change to the second slide, you would use $('#news').innerFadeTo(1)