This page contains a demonstration of blendimages.js, a small JavaScript that displays a number of images after eachother by gradually fading them into eachother.

You can easily put multiple blending image sequenses on a single page.

Include the JavaScript file

The only thing you have to do is upload blendimages.js to your own website and place the following code in the page to embed the JavaScript:

<script type="text/javascript" src="blendimages.js"></script>

Add list of images to page

Create a container (for example a div-element) on your page with the images that you want to blend in it, and set its width and height to match your images like this:

<div id="blendme" class="blend" style="width:400px; height:200px;">
<img src="image1.jpg" alt="my first image">
<img src="image1.jpg" alt="my second image">
<img src="image1.jpg" alt="my third image">
</div>

Hiding the images

Notice that the class is also set to 'blend' so that you can apply a style to the images. Because we don't want the images to show before they have been blended in we will need to set their opacity to zero, you can add a style-attribute to each image seperatly, but the quickest way is of course using a stylesheet:

.blend img {
opacity: 0;
-moz-opacity: 0;
-khtml-opacity:0;
filter: alpha(opacity=0);
}

The elegance of this is that if a visitor has JavaScript and stylesheets disabled or a mobile browser it will simply display the list of images. In case of a screen reader it will read the text of the alt-tag.

Start the blending

The final step is to tell JavaScript that it should blend those images. You do this by adding your own custom JavaScript to the page like this:

<script type="text/javascript">

function init() {

    blendImages('blendme');
}

window.onload = init;

</script>

This code will run the function init() once the page has been completely loaded. The function blendImages() tells the script that it should blend the element with the id 'blendme'.

Optional settings

You can also control the speed of the blending by adding more optional parameters to the function for the speed, pause, and caption.

id

Value of the id-attribute of the container that contains the list of images to blend.

speed

Amount of miliseconds that each fading step should take, increase this number to slow the fading down, lower the number to speed it up.

pause

Amount of miliseconds the image should be displayed after before the next image begins to fade-in.

caption

Value of the id-attribute of an element that should display the text in the alt-attribute of the displayed image. This value is optional. If you are using the caption each image in the list must have an alt-attribute.

You can add as many fading images to a page as you want by adding more function calls to blendImages() with different ID's.

blendImages('blendme');
blendImages('secondblend', 200, 1000, 'mycaption');
blendImages('thirdBlend', 150);
blendImages('blendmetoo', 56, 2234, 'othercaption');

Performance issues

Notice that blending images takes a significant amount of CPU-power, if your visitors don't have a fast computer the image may stutter and cause the page to respond slowly.

You can minimalize slowdown by blending less images, decreasing the speed of the blending, set a longer pause time, or use images with a lower resolution.

For the best result you should also make sure that all images in a list have the same width and height.

Demonstration

On the right side of this text you should see various images blending into each other. As you can see, you can position it anywehere on the page just like any other div-element using CSS.

This example also has a caption text displayed on top of the image, it can be set anywhere on the page though. The caption is taken from the alt-attribute of each image.

Check the source of this page to see how it was done!

This script and page have been written for brainerror.net and published on August 18, 2007.