This script is similar to the blender.js script, which turned out to be very nice (I thought, anyway). As it turns out, there were some friends of a friend who wanted the same basic thing, but with the images blending. I was promised a bottle of scotch for this, so here it is.

Blender.js 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.Blender 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.

The script is in use on Franschhoek.co.za.

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/blender.js'></script>

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

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

All the demos use the following images array:

var images = [

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

Event.observe(window, "load", function() {
	new Blender("defaultDemo", images);


Default Blender

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


Blender with options

new Blender("optionsDemo", images, {
	fadeDuration: 1.0,
	displayDuration: 0.5
<img id='optionsDemo' src='images/blender/sunrise.jpg' />


Blender with start and stop

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


Blender with auto size and no wrapping

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


New Features: dir, startIndex and beforeBlend

		var gallery = [
			{ img: "beach.jpg", alt: "On the beach" },
			{ img: "play.jpg", alt: "Puppy play" },
			{ img: "bone.jpg", alt: "My fake bone" },
			{ img: "snow.jpg", alt: "Snow in Africa?" },
			{ img: "sunrise.jpg", alt: "Sunset at the coast" }
		new Widget.Blender(
			gallery.pluck("img"), {
				dir: "images/blender/",
				startIndex: 1,
				beforeBlend: function(oldImg, newImg) {
					var alt = gallery.find(function(image) {
						return newImg.getAttribute("src").slice(-image.img.length) == image.img;
					newImg.setAttribute("alt", alt);
					newImg.setAttribute("title", alt);
		<img id='newFeatures' src='images/blender/play.jpg' alt='Puppy play' />
Puppy play


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.1.0: 7 Dec 2007

Version 1.0.2: 19 Aug 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 (193kB)