Image flow – Create a Stylish Scrolling Photo Album using XML

Image flow – Create a Stylish Scrolling Photo Album using XML

78 332185
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. This is the one that I’ve been looking for. It will be a great help to my new website. Thanks!

    • Yes, of course, this is possible too, goto our feed.php
      and add after
      <caption>{album_title}</caption>
      next:
      <link>{link}</link>
      <target>_blank</target>
      so – this allow to add even link to objects and target param too.
      You will need just assign necessary urls to your images.

  2. 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?

    Thanks

    • 2 jake
      What is your version if IE?
      I tested (just now) in IE8 and 9. I haven`t any difference here, all fine, same speed, same sizing effects

  3. 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

  4. 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

    • 2 Jake
      Unfortunately, the possibility to add a pause button is not here, it will require to modify the main js file to get such possibility
      About virtual windows, yes, it can be that virtual OS`s slower than main

  5. 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!!

    • Why?
      to generate different sets of images you can just use some param, as example, instead
      imf.create(“imageFlow”, ‘feed.php’
      you can have
      imf.create(“imageFlow”, ‘feed.php?set=1’ , imf.create(“imageFlow”, ‘feed.php?set=2’ etc
      and then just check this GET variable ‘set’ and return different sets of images. This is easy, isn`t it?
      You will need just use different a little generated HTML code (generated using PHP?)

  6. 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.

    • 2 challanah
      Yes, you are correct, , you should check your user extra GET variable (param), and generate different sets.
      Just check your feed.php file.
      I defined only single array $aUnits, you can define more of course

  7. 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!

  8. 2 Katie,
    Yes, this is possible my friend to have links at images too
    Firstly, lets change our template a little:
    <img>
    <src>{fileurl}</src>
    <title>{title}</title>
    <caption>{album_title}</caption>
    <link>{link}</link>
    </img>

    then, we will need to change our $aUnits array, and make here not simple array, but array of arrays, where you will keep and file names, and titles, and links too

    next, adding this to ‘strtr’ function where we can see array of replaces.
    and add after: ‘{album_title}’ => ‘my album’
    next: ‘{link}’ => $sMyLink

    Hope I explained well :)

  9. 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,

    Loading
    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.

    • 2 Peter,
      Make sure that you calling in browser
      http://localhost/ImageFlow2/example29/
      and not D:\wamp\www\ImageFlow2\example29
      :)

  10. Thanks for the quick reply Admin.

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

    • In case if you using Firefox – try to use Firebug plugin to locate any possible JS errors. Possible you have any errors? check it please

  11. 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>

    Loading
    Please wait some more again…

    • Hi Perer,
      Your code is correct, please switch to Console tab in firebug – and refresh page. Make sure that response of calling feed.php is not empty and not contain errors

  12. 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?

    • 2 Katie: Something like that:
      $aUnits = array(‘img1.jpg’ => array(‘Image 1’, ‘http://www.com’), ‘img2.jpg’ => array(‘Image 2’, ‘http://www.com’), ‘img3.jpg’ => array(‘Image 3’, ‘http://www.com’));
      foreach ($aUnits as $sFilename => list($sTitle, $sUrl)) {
      $sCode .= strtr($sTemplate, array(‘{fileurl}’ => ‘data_images/’ . $sFilename, ‘{title}’ => $sTitle, ‘{url}’ => $sUrl));
      }

  13. 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.

  14. 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

    file:///C:/Users/kelvin/Documents/Unnamed%20Site%202/demonstration/index.html

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

    • Hi kelvin,

      Try to load this demo from localhost, not from absolute path. Try to install ‘WAMP’ software (this is emulator of Apache-MySQL-PHP for windows) and open demo page.

  15. 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?

    • Hello Eri,
      Where? at our demo or at your version?
      I can suggest you to check server response (it should give us valid xml from our feed.php) via Firebug

  16. 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?

    • I can`t confirm that here are any error, just now – I unpacked this old package and accessed to
      http://localhost/ex29/
      in my FF, and here are no any warning or errors. It even work in IE7. I can do screenshot of opened console of firebug if you want.
      What version of FF you have? (I have 6.0.2 now). But when I developed it – I had 3.0 maybe.
      Are you unpacked All files from package? Which soft you using? Wamp/Xamp?

  17. 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 ,

    Loading
    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.

    • Yes man, you have very interesting situation. I can advice you only debug whole output result. Save it into local file as result, possible extra blank lines causing this, difficult to tell exactly. So about me – it worked fine and few years ago (at first versions of firefox) and it still working in last 6.0.2. This is pure JS, I don`t see why it can not work for you.

  18. 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.

    /img1.jpg</srctitle1</titlecaption1

    /img1.jpg</srctitle1</titlecaption1

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

    • Hello pankaj,
      As advice – in case of empty albums (galleries) – try to generate any XML with some static image (like no_images.jpg). It will help you.

  20. 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!

    • Happy New Year Autumn :-)
      Thanks for your comment. First, after upload – make sure that result works properly. You can try PC with Firefox (if you have Firebug plugin installed – much better). If it works – then – check result at your Mac. I hope that it should work without problem.
      As some advice – always use Binary FTP transfer mode (for FTP program – in settings). And, use safe editor (like Notepad++) to work with sources (PHP/JS etc)

  21. 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 http://www.flashxml.net 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.

    • Hello Robert,
      This are different ‘components’ of course. Ours is not Flash. This is javascript library.

  22. 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

    • Hello Wael,
      please point your attention to next code there:
      this.oc.addEventListener(‘DOMMouseScroll’, function(e)

Leave a Reply