Tigra Fader is free JavaScript slide show component featuring cross-fade transition effect between the slides
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:
Below is example of the slider initialization:
<script language="JavaScript"> // slide show initialization var mySlideShow = new tFader (A_ITEMS, A_TPL); </script>
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
As mentioned in previous section each fader initialization accepts two configuration parameters. This section explains their formats.
Notes:
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
Example:
// list of images to display var A_ITEMS = [ 'picture1.jpg', // relative path, current directory '../dirname/picture2.jpg', // relative path, other directory 'http://www.softcomplex.com/img/logo.gif', // absolute path with the domain '/img/logo.gif' // absolute path without domain ];
Notes:
Slide show settings is the JavaScript structure (associative array or hash) defining slide show parameters. Below is the list of the supported parameters:
key | Description | Default |
---|---|---|
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' };
Notes:
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: