Image flow – Create a Stylish Scrolling Photo Album using XML

Date: 25th Feb 2011 Author: admin 58 Comments
Posted in: AJAX, DHTML, JavaScript |Tags: , , , , , , ,

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 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:


<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);

<div class="example">
    <h3><a href="#">Image flow sample</a></h3>
        <div id="imageFlow">
            <div class="text">
                <div class="title">Loading</div>
                <div class="legend">Please wait...</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="">

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:


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}


#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:


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:



$sCode = '';

$sTemplate = <<<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" ?>


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


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?


Stay connected with us:

If you enjoyed this article, feel free to share our tutorial with your friends.


    • steve barbarich's Gravatar
    • steve barbarichMarch 5, 2011 5:59 am

      This is the one that I’ve been looking for. It will be a great help to my new website. Thanks!

    • drew's Gravatar
    • IOANNIS's Gravatar
    • jake's Gravatar
    • This is great, but I am getting drastically different results in IE. Your demo shows the same, slower transitions to the next image and Images themselves look choppy compared to other browsers.

      Any ideas on how to fix that?


    • jake's Gravatar
    • Also, they kinda bounce into place as apposed to the smooth transition in other browsers

    • jake's Gravatar
    • I tested on IE 7, 8, & 9. All with the same results. However, I am running windows on VMWARE. I will find a true PC to test on and let you know.

      Thanks for the response.


    • jake's Gravatar
    • Ok, tested on a PC on IE 8 and it does look much better in terms of speed, but it still kinda jumpy when the images settle in to place.

      Strange that it would be so different with virtual windows.

      Thanks for the help.


    • jake's Gravatar
    • challanah's Gravatar
    • When I try to create a second gallery on a different page in the same site, it works in every browser but IE. I tried creating a second feed.php and named it feed2.php to differentiate the two sets of images. This doesn’t work. Please help!!

    • challanah's Gravatar
    • Thanks. I’m not the world’s best with programming stuff but I will certainly give this a try!

    • challanah's Gravatar
    • I guess I’m totally lost. I can’t figure out how or where to classify set 1 and set 2′s images. I assume it would be in the feed.php but I don’t know how to differentiate them.

    • Katie's Gravatar
    • I’m trying to set up this code so that each image hyperlinks to a different page when clicked on. I added the {link} code in the specified place above and also added ‘{link}’ => $slink to $sCode variable on the feed.php page. I’m not sure how to define the $sLink though. I’ve tried several ways and they aren’t working for me, any help would be appreciated!

    • Peter B's Gravatar
    • Hi Admin,

      I have set the project up in Netbeans and placed all of the code and images under www in my Wamp folder ie D:\wamp\www\ImageFlow2\example29

      When I run the project locally I see only the items described in the index.html file ie,

      Please Wait…

      and the scrolling controls on the black background screen.

      I do not see any images and it would appear that

      imf.create(“imageFlow”, ‘feed.php’, 0.85, 0.20, 1.5, 10, 5, 5);
      and feed.html
      is not being called.

      Firefox is the browser and there are no restrictions on the folders.

      Any clues appreciated.

    • Peter B's Gravatar
    • Thanks for the quick reply Admin.

      Yes http://localhost/ImageFlow2/example29/ is being called.
      Same result.

    • Peter B's Gravatar
    • I can’t see any errors with Firebug.
      imf.create("imageFlow", ‘feed.php’, 0.85, 0.20, 1.5, 10, 5, 5);
      <a href="#" rel="nofollow">Image flow sample</a>

      Please wait some more again…

    • Katie's Gravatar
    • Thanks! But what about the link of code that says foreach ($aUnits as $sFilename => $sTitle){

      How do I update that so it includes the $sLink variable?

    • Peter B's Gravatar
    • Firebug does not indicate any errors. I wrote a deliberate path error and Firebug trapped that but back to your code and no errors, no images.

    • kelvin's Gravatar
    • hi there;
      I tried your code but i just get a black screen, that says loading please wait. I am new to coding so i do not know where i am going wrong. No pictures are appearing either. That’s the url to where my files are located


      I want to learn how to code so i can design my own personal website.

    • Eri's Gravatar
    • Hi,

      Firebug indicates an error:

      AJAX(xmlfile).responseXML is null
      var bank = AJAX(xmlfile).responseXML…item(0).getElementsByTagName(“img”);

      image-flow.js (line 99)

      How to fix it?

    • Eri's Gravatar
    • hi admin,

      I call in browser http://localhost/example29/ your demo, and the Firebug indicates the error I wrote before.

      The server response is 10 ms via Firebug. I think is ok.

      How to fix this error?

    • Eri's Gravatar
    • Hi,

      I have updated my version of EasyPhp, now Firebug doesn’t show any error, but when I run the project locally http://localhost/example29/ I see only ,

      Please Wait…

      and the scrolling controls on the black background screen.

      The images aren’t loaded.

      I tried also with Wamp server and the result is the same.

      I have this version of firefox: 6.0.1.

    • Yin Yin's Gravatar
    • very nice tutorial. i love your gallery so much. Thank you so much for sharing tutorials.

    • rulhaf's Gravatar
    • pankaj's Gravatar
    • Hi Admin
      I have tried the same code with jsp instead of PHP.
      where jsp will return a xml to the ajax call inside the js file

      problem is when AJAX(xmlfile).responseXML returns null, for that the whole album not working.
      but i can see the ajax response by AJAX(xmlfile).response, which shows the xml as text format.

      is it possible to make a static xml file as source so that AJAX can read that file and generate the album.
      in this case what will be the xml format?
      i tried to create one after seeing the php file, can you please confirm whether the xml is correct what js is expecting.



    • pankaj's Gravatar
    • oops it seems i cant write xml tags in the post
      replacing angular braces with ( and )
      (?xml version=’1.0′ encoding=’ISO-8859-1′?)
      (img)(src)img1.jpg (/src)(title)title1(/title)(caption)caption1(/caption)(/img)
      (img)(src)img1.jpg (/src)(title)title1(/title)(caption)caption1(/caption)(/img)

    • sam's Gravatar
    • Autumn's Gravatar
    • Hi, I am new at this and I find this tutorial really cool! But I cannot get it to work properly at all. :( I am using iWeb on my Mac and every time I enter the HTML code into the widget a black box shows up with the blue text and nothing else.

      Could you please give me some guidance on how to get this to work? It would be enormously appreciated. Thank you and Happy New Year!

    • Robert's Gravatar
    • Hi there guys. Nice component, I definitively want to try it on my website. I see you guys have Live Demo but when I access the page it’s just the component, for example have Live Demo but there you can change the settings of the component live, so here on Live Demo I can’t see that. It is a problem with it? Thank you in advance.

    • wael's Gravatar
    • hi admin,

      i want to add on mouse move instead of mouse wheel scrolling…. in image- flow.js .but i cant .can you help me on this.

      thanks in advance

    • Dan's Gravatar
    • 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…

    • wael's Gravatar

1 Trackback

  1. Tweets that mention Image flow – Create a Stylish Scrolling Photo Album using XML – Script Tutorials -- on February 25, 2011 at 4:01 pm
  2. Image flow – Create a Stylish Scrolling Photo Album using XML on February 25, 2011 at 5:28 pm
  3. on February 25, 2011 at 6:19 pm
  4. Image flow – Create a Stylish Scrolling Photo Album using XML … | Neorack Tutorials on February 25, 2011 at 11:02 pm

Leave a Reply

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


Refresh Image


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>