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/
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'.
<ul id="news">
<li>content 1</li>
<li>content 2</li>
<li>content 3</li>
</ul>
$('#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)
});
$('#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)