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!
This is the one that I’ve been looking for. It will be a great help to my new website. Thanks!
How could you add a hyperlink to link to a page, once an image is clicked?
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.
I WANT TO KNOW IF THERE IS OTHER WAY TO MAKE THIS WITHOUT PHP
2IOANNIS
Yes, of course, you will need provide static XML as feed of images, all easy
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
Also, they kinda bounce into place as apposed to the smooth transition in other browsers
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
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
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
Additionally is there a way to add a play/pause button to this?
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
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?)
Thanks. I’m not the world’s best with programming stuff but I will certainly give this a try!
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
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!
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
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
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
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…
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?
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.
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
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));
}
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.
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
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?
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.
very nice tutorial. i love your gallery so much. Thank you so much for sharing tutorials.
can i use this plugin for commercial ?
What do you mean? Going to sell this somewhere?
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
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)
Nice work. Thanks for the knowledge. Hope to learn more such things for you…
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!
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.
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)
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.
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)
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!
thanks admin…i done it