Image flow – Create a Stylish Scrolling Photo Album using XML

Image flow – creating 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):

    image1
    image2
    image3
    image4

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!

Enjoyed this Post?

If you enjoy our articles, feel free to share our tutorials with your friends.

74 thoughts on “Image flow – Create a Stylish Scrolling Photo Album using XML

  1. Hello,
    I appreciate the help you give us.
    I have a problem when I try to load this script from an external page (which works fine by itself) into a div in my website.
    In firebug I have this error:
    object is null
    getElementsByClass (object=null, tag=”div”, className=”scrollbar”)image-flow.js (line 30)
    ImageFlow(oCont=”imageFlow”, xmlfile=”feed.php”, horizon=0.85, size=0.2, zoom=1.5, border=10, start=5, interval=5)image-flow.js (line 78)
    load()image-flow.js (line 370)
    (?)()
    And it is shown only the black background with loading…
    Thanks!

    • 2 Dan,
      please make sure that you have
      <div id="imageFlow">
      in the same environment where you are calling this javascript.

  2. Hi, do you know how to modify image-flow.js so it will be able to change photos using arrow keys on the keyboard? When I press left arrow it will change photo to the left, and if I press right arrow it will change photo to the right.

    • Hello arturos,
      As I see, you have to add keyboard handler events (onkeydown), and handle arrow keys.
      You can use similar methods to shift images:
      /* ==== right arrow ==== */
      this.arR.onclick = this.arR.ondblclick = function () {
      if (this.parent.view < this.parent.NF – 1)
      this.parent.calc(1);
      }
      /* ==== Left arrow ==== */
      this.arL.onclick = this.arL.ondblclick = function () {
      if (this.parent.view > 0)
      this.parent.calc(-1);
      }

  3. How to have two image flow in one php file?? Cause i tried having to Image flow in 1 php file, but only one image flow was working

  4. Can we create a simple photo gallery using fade in and fade out effect? I have around 10 photos each of them should fade in fade out and run continuously. Pls help me.

    • Hello Girish,
      Yes, of course you can. And, it seems that I already did something similar, please use search to find it

  5. Hello! I AM DESPERATE! I need your help! Can you tell me how to add arrow scroll and how to disable that when i am clicking on a image to zoom in?? Please answer me!

    • Hi Vasile,
      Sorry, but I didn’t get you about ‘arrow scroll’. Just because our demo already has scroll (with arrows). It let you switch images (back/forward).
      As for ‘onclick’ behavior, you should edit js/image-flow.js file, just search for ‘this.img.onclick’, and you will find this place.

  6. hello admin,
    i tried your code but i didnt get correct output.
    in a black screen “loading please wait”
    where i am wrong.

  7. Hi Admin
    Nice tutorial
    I can run your script in stand alone mode. But I need to integrate this to my existing php source code. My path is
    home directory-> index.php
    next directory -> theme directory-> your code directory -> index.theme.html

    So I have integrated your html code in my index.theme.html file
    this index.theme.html is called from my index.php
    now how to integrate feed.php to my code
    please help

  8. i have a problem !
    Uncaught TypeError: Cannot call method ‘getElementsByTagName’ of null ( error, javascript)
    at ImageFlow (public_html/js/image-flow.js:99:40)
    at load (public_html/js/image-flow.js:370:7)
    at (public_html/js/image-flow.js:399:43)

    i don’t understand why??

    thank you for answer

    • Hi bizar, try to open your ‘feed.php’ in browser, and make sure that it hasn’t contain any errors and that the first parent element is ‘bank’

  9. Hi Admin,
    please help… I tried your code. its working perfect..
    But i have 5 Images, I want the middle picture (img3) to come first when loading, 2 pics on each side…
    How can i do it… pleas help :(

  10. Hi Andrew,

    Your Tutorial is great and helpful.

    But, one question though, what if we want to get the images directly from a folder (lets say we have more than 50 images) or may be images coming from web images service (such as flicker etc.)

    Thanks

    • Hello Sam,
      Sure, you can do it, in that case you have to make your changes in the ‘feed.php’ file (to work with different folders)

  11. Hi Admin,

    I am trying to figure out how to control which image is centered on the screen. Any help would be highly appreciated.

    Thanks
    SD

    • Hi Sven,
      What do you mean – centered? Centered image is active image of the flow. Maybe you need to change order of your images?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

     

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>