Image flow – Create a Stylish Scrolling Photo Album using XML

Image flow – Create a Stylish Scrolling Photo Album using XML

78 339490
Image flow

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:

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

    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

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!

SIMILAR ARTICLES


78 COMMENTS

  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?

  12. Hi,
    I’m trying to use this for a campaign list for our intranet. I’ve downloaded the complete files and located them on the server exactly as they are. However, when I run it I constantly get ‘Loading please wait’ . I have tried the files on our website also and I get the same error.
    Can you help please?
    Thanks

    • Hi Michelle,
      You need to debug your server response (for example – using the Firebug plugin). Only in this case you will know if there is any error or not.

  13. how can i change the server output and make your third image as the first image?
    please can you show us, how can we do, please

Leave a Reply