Widget.Blender

Introduction
Simple Usage
Demos
Browser Support
Change History
Known Issues
Downloads & Documentation

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:

to copy, distribute and transmit the work
to adapt the work

However you must:

You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).
That is by providing a link back to http://www.eternal.co.za or to the specific script page. This link need not be on the page using the script, or even nescessarily even on the same domain, as long as it's accessible from the site.

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 = [
	"images/blender/beach.jpg",
	"images/blender/play.jpg",
	"images/blender/bone.jpg",
	"images/blender/snow.jpg",
	"images/blender/sunrise.jpg"
];

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

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

Demos

Default
Options
Start and Stop
Auto Size
New Features

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' />
</div>

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(
			"newFeatures",
			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;
					}).alt;
					newImg.setAttribute("alt", alt);
					newImg.setAttribute("title", alt);
				}
			}
		);

		<img id='newFeatures' src='images/blender/play.jpg' alt='Puppy play' />

Browser Support

The script has been tested in

FireFox 2.0.0.11
Opera 9.23
Internet Explorer 6 SP2
Internet Explorer 7.0.5703.11
Safari 3 Beta

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

Updated script for Prototype 1.6 and Scriptaculous 1.8
Blender is now in the Widget namespace (Widget.blender).
Blender no longer requires Scriptactulous Builder and uses Prototypes new Element(...) instead.
Minified script and minified single script files added to download.
New license: Creative Commons Attribution 2.5 South Africa License.
see more at: http://creativecommons.org/licenses/by/2.5/za/
new Blender(...) has been deprecated and will be removed in the next major version
Added dir option
Added beforeBlend callback option
Added startIndex option

Version 1.0.2: 19 Aug 2007

Updated DOM creation to use Builder.node in all instances
Updated DOM traversal to use Element.up() for parent nodes

Version 1.0.1: 15 Aug 2007

Added attributes option
Now requires builder.js from Scriptaculous
Now delays the start call by displayDuration
Fixed a bug that started the blend with the 3rd image in the list

Version 1.0.0: 12 August 2007

Initial release

Known Issues

In all browsers, except Safari 3 Beta, the auto-sizing image will size to 0 x 0 when the image parent is hidden (see the demo). Safari appears to size the image to it's full size. Once the image parent is visible, the next image will be sized correctly.
IE6 and IE7 have issues with absolutely positioned images on not absolutely positioned elements. If you are using IE, see the demo.

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

Downloads & Documentation

Download (193kB)
Documentation