affordable web development services
| About Us | Services | Download | Order | Support | Subscribe to News Feed Follow us on Twitter Join us on Facebook |

Tigra Fader

Table of Contents


Tigra Fader is free JavaScript slide show component featuring cross-fade transition effect between the slides


Browser Compatibility

Tigra Fader works (including the cross-fade transitions between slides) in all modern browser supporting transparency or opacity properties in one way or another. In old browsers fader just displays first image which preserves the layout of the page.

Platform Browser
MS IE Netscape Mozilla Firefox Opera Safari
Windows 95/98/ME/2000/XP 5+ 6+ 1+ 9+ 3+
Mac OS n/a n/a 1+ 9+ 1+
KDE on Linux/FreeBSD n/a 6+ 1+ n/a n/a


This section describes the default file organization of the samples provided in the distribution package. It can be changed to accommodate the needs of the specific application

Below is the sample for linking Tigra Fader code to the HTML page:

<!-- ... somewhere in the header ... -->
<script language="JavaScript" src="tFader.js"></script>


Each instance of the Tigra Fader must be initialized. The slide show will appear relatively positioned inside the element containing the initialization code.

Initialization code (constructor) receives two parameters:

  1. list of slides - array containing the paths and names of the pictures to be displayed
  2. slide show settings - the structure defining slide show parameters such as size and duration of the slides

Below is example of the slider initialization:

<script language="JavaScript">
	// slide show initialization	
	var mySlideShow = new tFader (A_ITEMS, A_TPL);

Initialization call returns the reference to the fader object which can be later used in advanced setups for calling object's methods and accessing its properties

Configuration Variables

As mentioned in previous section each fader initialization accepts two configuration parameters. This section explains their formats.


List of Slides

List of slides is a JavaScript array containing paths and names of the images to be displayed in the slide show. This variable is referenced as first parameter in the fader initialization call


	// list of images to display
	var A_ITEMS = [
		'picture1.jpg',                            // relative path, current directory
		'../dirname/picture2.jpg',                 // relative path, other directory
		'', // absolute path with the domain
		'/img/logo.gif'                            // absolute path without domain


Fader Settings

Slide show settings is the JavaScript structure (associative array or hash) defining slide show parameters. Below is the list of the supported parameters:

random if set to true the images in the list are shuffled so their order is different every time the page loads false
slidetime time in seconds for slides to be displayed (not including the transition) 2
transtime duration of the cross-fade transition effect between the slides 0.5
steps number of transparency changes (steps) during the cross-fade transition between the slides. Larger the number - smoother the transition, but more system resources used. 40
width width in pixels of the slide show window set by the image
height height in pixels of the slide show window set by the image
alt text to be displayed in the small pop-up (usually light yellow) box that appears when mouse stops over the image (alt attribute of the <img ..> tag) no alt text
css name of the CSS class to be assigned to all images no CSS class assigned

Slide show Settings Example:

	// configuration structure
	var A_TPL = {
		'random'   : true,
		'steps'    : 20,
		'transtime': 0.5,
		'slidetime': 3,
		'width'    : 450,
		'height'   : 198,
		'alt'      : 'Sample Tooltip',
		'css'      : 'imgClass'


Terms of Use

Tigra Fader is FREE for any kind of applications. There is no license fee or royalty fee to be paid at any time for using the Tigra Fader
You may include the source code or modified source code within your own projects for either personal or commercial use but excluding the restrictions outlined below. The following restrictions apply to all parts of the component, including all source code, samples and documentation:

Links and References