Skip to content
This repository has been archived by the owner. It is now read-only.
Extended version of the original jQuery InnerFade Plugin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.mdown
example.html
jquery.innerfade.js
jquery.innerfade.min.js

README.mdown

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)

You can’t perform that action at this time.