What is ImageFlow and what is it for?
Integrating ImageFlow in CodeIgniter
We are starting from the basis that we have already downloaded and installed the CodeIgniter framework on our website. So, the first thing we need is to download the library, which is licensed under Creative Commons if we use it on a non-commercial website, otherwise we have to pay a license to operate with it, but anyway, you can find all this information about the license in the downloading page. Once we have downloaded the library, we have to create a directory “js” in the root folder of our website, at the same level as the directory “system” of CodeIgniter. Inside that folder we will place the directory “ImageFlow” after unzip it. If we want to, we can remove the index.html file and the directory img inside ImageFlow, since they are only an example about how to use the library.
Once we have the library within our CodeIgniter application we can start working to make it work perfectly. The first thing we need is to edit the file imageflow.js in two lines. In the first line to edit, we have to add a new option to the library, in order to pass the URL of our application to ImageFlow, exactly in the line number 69:
... startAnimation: false, /* Animate images moving in from the right on startup */ xStep: 150, base_url: '' } ...
The next change will be in the line number 157, where we add the url to reference correctly the image that we want to add:
... var src = node.getAttribute('src',2); src = thisObject.base_url + 'js/ImageFlow/reflect'+version+'.php?img='+src+thisObject.reflectionGET; node.setAttribute('src',src); ...
With this, we have already prepared the library for interacting with CodeIgniter. Now let’s call the library from our view file, so we need the following code:
With this we have integrated the library in our application. You can find more help in the documentation section of the library. Now we just need to configure our PHP server properly.
Configuring our PHP server
Since the library needs to dynamically generate the final images from the original ones that we passed, our server needs to have installed the PHP module php5-gd to be able to generate the graphics.
So, we have already finished our integration of the ImageFlow library into our app built with CodeIgniter!