Image flow – Create a Stylish Scrolling Photo Album using XML

Image flow – creating photo album (using XML)

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:

Live Demo

download in package

---

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

download in package

---

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!