Step 1 - Preparation

The reflections of ImageFlow need a server running PHP 4.3+ with the GD extension 2.0+ installed. 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:

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

Replace {{name}} by a unique name. Make sure, that the class name is always "imageflow". Replace {{image-x}} by a link to your image. Replace {{caption-x}} by a caption.

The image width and height parameters {{width-x}} and {{height-x}} must be set in the XHTML for full compatibility with the Internet Explorer.

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:

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 {{name}} by the exact same unique name you used for the id attribute of the div container in the step above.

Please note, that you can call multiple instances of ImageFlow on one site by simply adding another div container like the one in Step 2 and adding another Instance within the domReady function like in Step 3. Check the documentation for more information.