Installation
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:
XHTML<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:
XHTML<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:
JSdomReady(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.
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.