Malte’s Blog

imgFader is a small and easy-to-use javascript (2.7 KiB), which generates a platform-independent, eye-candy slideshow by only needing an array containing some picture URLs. It is very suitable for generating a slide-show or enhancing the pictures on your website. Look at these examples to satisfy yourself.

Download compressed version (2,7 KiB)
Download source (3,8 KiB)

Examples

Presentation of buildings
A common slideshow

License

imgFader is licensed under GPL v3 (GNU General Public License). You can download a copy here.

Supported Browsers

imgFader is platform-independent, so it’s necessary that it’s supported by all popular browsers. imgFader has already been successfully tested in the following browsers:

• Firefox 2 and 3
• IE 6
• Opera 9

Fade

Initiates Fade class and returns Fade object for further use.

The image container is automatically set to position:relative and all containing pictures are set to position:absolute.

Syntax

var fader = new Fade(’id_of_element’, [options]);

Examples

This initiates the fading with 3 pictures (1.jpg, 2.jpg, 3.jpg) within the imgContainer element, fading each 6 seconds for 1 second in random order.

var fader = new Fade(’imgContainer’,{imgs:['1.jpg','2.jpg','3.jpg'],mode:’random’,fDur:1,delay:6,clear:true});

This initiates the fading with 2 pictures by keeping default settings (delay of 5 seconds, 1 sec duration, given order)

var fader = new Fade(’imgContainer’,{imgs:['1.jpg','2.jpg','3.jpg']});

Options

imgs	Array containing the picture URLs
mode	‘order’ shows pictures in the given order and ‘random’ shows pictures in random order (Default: order)
fDur	Fade duration (Default: 1)
delay	Delay between two pictures (Default: 5)
clear	Sets whether container element should be cleared. Otherwise content will be added. (Default: true)

Fade.add

Syntax

fader.add(url,[options]);

Examples

This adds a fourth picture to the end of the queue and shows it immediately.

fader.add(’4.jpg’,{pos:’end’,immediate:true,force:true});

This adds a picture at the third position. It will be shown when fading obtains the third position again.

fader.add(’4.jpg’,{pos:3});

Options

pos	Position where picture should be added. Possible values: 1, 3, ‘first‘, ‘end‘. (Default: end)
immediate	Fade to picture immediately. (Default: false)
force	Add picture even when it’s already added (Default: false)

Fade.go

Fade to specific picture.

Syntax

fader.go(value);

value can be an absolute ID (e.g. 1 or 3) or a relative value (e.g. ‘+2‘, ‘-1‘)

Example

<a href=“javascipt:fader.go(1)“>Go to first picture</a>
<a href=“javascript:fader.go(’-1′)“>Switch 1 picture back</a>

Fade.preload

Preload a specific picture

Syntax

Fader.preload(img);

img is the URL of the picture

Example

fader.preload(’6.jpg’);

Fade.start

Start fading. Note that fading is automatically started after initiating. This function does only make sense when fading was stopped before.

Example

<a href=”javascript:fader.start();”>Start</a>

Fade.stop

Stops fading.

Example

<a href=”javascript:fader.stop();”>Stop</a>