Image flow – Create a Stylish Scrolling Photo Album using XML

Photo album tutorial. Today I will tell you how to create photo album using one old library (Image flow). Long time ago I took its from http://www.dhteumeuleu.com. In that time I was very impressed with its. Hope that you will love this too.

What is most important – that it allow to load xml set of images which you can provide via PHP file. So just imagine, that in your script (or even possible – CMS), you will able to generate different galleries based on different params. As example photo galleries of different members.

Here are samples and downloadable package:

Contents

Step 1. HTML
index.html
Step 2. CSS
css/main.css
css/image-flow.css
Step 3. JS
js/image-flow.js
Step 4. PHP
feed.php
Step 5. Images
Conclusion

Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML. This is source code of our sample:

index.html

<link rel="stylesheet" href="css/main.css" type="text/css" /> 
  
<link rel="stylesheet" href="css/image-flow.css" type="text/css" /> 
  
<script src="js/image-flow.js"></script> 
  
<script language="javascript" type="text/javascript"> 
  
    imf.create("imageFlow", 'feed.php', 0.85, 0.20, 1.5, 10, 5, 5); 
  
</script> 
  
<div class="example"> 
  
    <h3><a href="#">Image flow sample</a></h3> 
  
    <div> 
  
        <div id="imageFlow"> 
  
            <div class="text"> 
  
                <div class="title">Loading</div> 
  
                <div class="legend">Please wait...</div> 
  
            </div> 
  
            <div class="scrollbar"> 
  
                <img class="track" src="images/sb.gif" alt=""> 
  
                <img class="arrow-left" src="images/sl.gif" alt=""> 
  
                <img class="arrow-right" src="images/sr.gif" alt=""> 
  
                <img class="bar" src="images/sc.gif" alt=""> 
  
            </div> 
  
        </div> 
  
    </div> 
  
</div>

As you can see – initialization is pretty easy, here are constructor: ImageFlow(oCont, xmlfile, horizon, size, zoom, border, start, interval)

So for our sample I used: imf.create(“imageFlow”, ‘feed.php’, 0.85, 0.20, 1.5, 10, 5, 5);

It mean that we will using ‘feed.php’ as XML source of our images, and few other params for horizontal position, sizes, zoom etc.

Step 2. CSS

Here are used CSS files:

css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0} 
  
.example{background:#FFF;width:1000px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius: 3px;-webkit-border-radius: 3px}

css/image-flow.css

#imageFlow{position:relative;overflow:hidden;background:#000;width:100%;height:600px} 
  
#imageFlow .diapo{position:absolute;left:-4000px;cursor:pointer;-ms-interpolation-mode:nearest-neighbor} 
  
#imageFlow .link{border:dotted #fff 1px;margin-left:-1px;margin-bottom:-1px} 
  
#imageFlow .text{position:absolute;left:0;width:100%;bottom:16%;text-align:center;color:#FFF;font-family:verdana, arial, Helvetica, sans-serif;z-index:1000} 
  
#imageFlow .title{font-size:.9em;font-weight:700} 
  
#imageFlow .legend{font-size:.8em} 
  
#imageFlow .scrollbar{position:absolute;left:10%;bottom:10%;width:80%;height:16px;z-index:1000} 
  
#imageFlow .track{position:absolute;left:1%;width:98%;height:16px;filter:alpha(opacity=30);opacity:0.3} 
  
#imageFlow .arrow-left{position:absolute} 
  
#imageFlow .arrow-right{position:absolute;right:0} 
  
#imageFlow .bar{position:absolute;height:16px;left:25px} 
  
#imageFlow a,#imageFlow a:visited{text-decoration:none;color:#ff8000} 
  
#imageFlow a:hover,#imageFlow a:visited:hover{text-decoration:none;background:#ff8000;color:#fff}

Step 3. JS

Here are our main library JS file:

js/image-flow.js

No need to give full code of that file here, it pretty big. It always available as a download package.

Step 4. PHP

Here are code of our XML generator:

feed.php

<? 
  
$sCode = ''; 
  
$sTemplate = <<<XML 
  
<img> 
  
    <src>{fileurl}</src> 
  
    <title>{title}</title> 
  
    <caption>{album_title}</caption> 
  
</img> 
  
XML; 
  
$aUnits = array('img1.jpg' => 'Image 1', 'img2.jpg' => 'Image 2', 'img3.jpg' => 'Image 3', 'img4.jpg' => 'Image 4', 'img5.jpg' => 'Image 5'); 
  
foreach ($aUnits as $sFilename => $sTitle) { 
  
    $sCode .= strtr($sTemplate, array('{fileurl}' => 'data_images/' . $sFilename, '{title}' => $sTitle, '{album_title}' => 'my album')); 
  
} 
  
header ('Content-Type: application/xml; charset=UTF-8'); 
  
echo <<<EOF 
  
<?xml version="1.0" ?> 
  
<bank> 
  
    {$sCode} 
  
</bank> 
  
EOF; 
  
?>

As you can see – I just generate easy XML feed using some template. You can do this with your images and using different paths to images too. Plus – you can have custom album title too.

Step 5. Images

Here are necessary images for gallery itself (for navigation):

And, all source images I put to ‘data_images’ folder. This can be any other your folder of course. Just don`t forget to correct feed.php in this case too.

Live Demo

Conclusion

Today I told you how to build new type of dhtml gallery. Sure that you will happy to use it in your projects. Good luck!