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):
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!
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.
thanks admin…i done it
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);
}
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
Hello Vivek,
Try to use two different ID for parent objects.
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
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.
hello admin,
i tried your code but i didnt get correct output.
in a black screen “loading please wait”
where i am wrong.
Hello Rohni,
You can have a JS error, please make sure that you don’t have any
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
You will need to use an exact path to this feed.php (full path to this file)
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’
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 :(
Hi Yesudas, try to change the server output, just make your third image as the first image
How to start the gallery show at a particular image ? Thanks in advance !
Hello Afroz,
Try to change order of images (in feed.php)
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)
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?
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.
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
Hi Robert,
Check ‘feed.php’ file, here is the ‘$aUnits’ array. Just change order.