ImageFlow is an unobtrusive and userfriendly JavaScript image gallery. For more information about ImageFlow read the features list, take a look at the documentation and check the blog. For anything else simply drop a line in the shoutbox.

Step 1 - Preparation

The reflections of ImageFlow need a server running PHP 4.3.2+ with the GD extension 2.0.1+. Download the latest ImageFlow version, unpack it and upload the files imageflow.js, reflect2.php, reflect3.php, imageflow.css and slider.png to your server.

If you care about filesize upload and use the imageflow.packed.js instead of the imageflow.js.

Step 2 - Implementation

To implement ImageFlow in your website you need to add the following two lines inside the header of your XHTML page:

<link rel="stylesheet" href="imageflow.css" type="text/css" />
<script src="imageflow.js" type="text/javascript"></script>

You then need to insert the following XHTML in the body of your site:

<div id="unique_name" class="imageflow"> 
 <img src="dir/image_1.jpg" longdesc="URL_1" width="w_1" height="h_1" alt="Text_1" />
 <img src="dir/image_2.jpg" longdesc="URL_2" width="w_2" height="h_2" alt="Text_2" />
 <img src="dir/image_3.jpg" longdesc="URL_3" width="w_3" height="h_3" alt="Text_3" />
</div>

Replace unique_name by a unique name. Make sure, that the class name is always imageflow. Replace dir/image_x.jpg by a link to your image. Replace URL_x by a link that will be opened on clicking that image if it is focussed. Replace Text_x by a caption.

The image width and height parameters (w_x and h_x) must be set in the XHTML for full compatibility with the Internet Explorer. Sorry for this extra load of work - every browser but Microsofts Internet Explorer can fetch the right image dimensions via the JavaScript!

Step 3 - JavaScript

In the last step you need to tell ImageFlow the unique id you used in the XHTML of your website. At the bottom of the imageflow.js (and the imageflow.packed.js) you will find the following lines:

domReady(function()
{
 var instanceOne = new ImageFlow();
 instanceOne.init({ ImageFlowID: 'myImageFlow' });
});

This code creates a new ImageFlow instance when your website has finished loading its DOM structure. The important part here is the option ImageFlowID. Replace myImageFlow by the exact same unique name you used for the div container in the step above.