Widget.Fader

Contents

More

I originally wrote an image fading script for Nondela (this site currently only works in Internet Explorer due to various issues with the Adobe SVG plugin which is being used for the map component), but it was very hard coded. A little while later I was helping a friend out with a small development which can be found at 4D-Decor and did the first version of the class to simplify matters. I swore that at some point I would finish the code and make a proper component out of it. Well, that point came and this is the result. Since then the script has been updated and used on A Contest of Artistry and probably a couple of other places judging by the few emails I've received and the downloads I've seen.

Widget.Fader makes use of the excellent Prototype and Scriptaculous libraries. With the release of Prototype 1.6 and Scriptaculous 1.8 the script was updated and put in the Widget namespace.

I've updated the script license:

Widget.Fader is licensed under the Creative Commons Attribution 2.5 South Africa License.

Under this license you are free to:

However you must:

I'd also like an email telling me where you are using the script, although this is not required. More often than not I will link back to the site using the script. Other than that, you may use this class in any way you like, but don't blame me if things go pear shaped. If you use this library I'd like a mention on your website, but it's not required. If you like it, send me an email. If you find bugs, send me an email. If you don't like it, don't tell me: you'll hurt my feelings.

Simple Usage

To use the script, include the following scripts in the head section: 

<script src='js/prototype.js'></script>
<script src='js/effects.js'></script>
<script src='js/fader.js'></script>

Or use the minified single script version if you only plan to use Widget.Fader: 

<script src='js/fader-all-min.js'></script>

All the demos use the following images array: 

var images = [
	"images/fader/beach.jpg",
	"images/fader/play.jpg",
	"images/fader/bone.jpg",
	"images/fader/snow.jpg",
	"images/fader/sunrise.jpg"
];

And the Faders are instantiated in the window.onload event using (for example): 

Event.observe(window, "load", function() {
	new Widget.Fader("defaultDemo", images);
});

Demos

Default Fader

new Fader("defaultDemo", images);
<img id='defaultDemo' src='images/fader/sunrise.jpg' />

 

Fader with options

new Fader("optionsDemo", images, {
	fadeInDuration: 1.0,
	fadeOutDuration: 0.5,
	displayDuration: 0.5
);
<img id='optionsDemo' src='images/fader/sunrise.jpg' />

 

Fader with start and stop

var startStopFader = new Fader("startStopDemo", images, { autoStart: false });
Event.observe("startButton", "click", startStopFader.start.bind(startStopFader));
Event.observe("stopButton", "click", startStopFader.stop.bind(startStopFader));
<button id='startButton'>Start</button> <button id='stopButton'>Stop</button> <br />
<img id='defaultDemo' src='images/fader/sunrise.jpg' />

 

Fader with auto size and no wrapping

new Fader("autoSizingDemo", images, { autoSize: true });
<div style='position:relative;width:200px;height:200px;padding:4px;border:1px solid red'>
	<img id='autoSizingDemo' src='images/fader/sunrise.jpg' width='200' />
</div>

 

Fader with Text

		var quotes = [
			"I have yet to see any problem, however complicated, which, when looked at in the right way, did not become still more complicated.<br /><i>-Poul Anderson</i>",
			"Real programmers can write assembly code in any language.<br /><i>-Larry Wall</i>",
			"A clever person solves a problem. A wise person avoids it.<br /><i>-Albert Einstein</i>",
			"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.<br /><i>-Brian Wilson Kernighan</i>"
		];
		new Widget.Fader("textDemo", quotes, { fadeOutDuration: 0.5, fadeInDuration: 0.8, builder: Widget.Fader.textBuilder });

		<div style='border: 1px solid #ccc;padding: 4px;font-size:16px;'>
			<div id='textDemo'>Loading quotes...</div'>
		</div'>
Loading quotes...

 

Browser Support

The script has been tested in

all on Windows XP SP2 and all basic functionality works. Please see the known issues for any browser specific problems. If you use or test this script on another system and it works (or doesn't), please let me know. You can post comments here or send me mail directly.

Change History

Version 1.2.0: 11 Feb 2007

Version 1.1.1: 17 Nov 2007

Version 1.1.0: 11 Nov 2007

Version 1.0.2: 20 Sep 2007

Version 1.0.1: 15 Aug 2007

Version 1.0.0: 12 August 2007

Known Issues

If you come across any other issues please post a comment here or send me mail directly.

Downloads & Documentation

Download (~198KB)
Documentation

Creative Commons License
Widget.Fader by Marc Heiligers is licensed under a Creative Commons Attribution 2.5 South Africa License.