ImageFlow in CodeIgniter

This time I will explain how to include JavaScript library called ImageFlow within the CodeIgniter framework and make it runs at the first time, which is not easy! Also, I will explain some small modifications to the code of the library. Then we will see an example of how to include it and finally we will see the PHP module required for proper operation. But first, let’s see what is the library ImageFlow and what it does.

What is ImageFlow and what is it for?

ImageFlow is a JavaScript library that allows us to add a really elegant image gallery in our website in a very simple way, making it look like Flash without the drawbacks that technology can bring. So, in this way we can show our image gallery how we want, since it has a large number of configuration parameters, to give it the appearance and behaviour that we like or need for our site. But that is enough and let’s go to the important, the integration into CodeIgniter.

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:

<div id="slider" class="imageflow">
    <img src="<?php echo base_url();?>img/image1.jpg" alt="Text caption" logndesc="url_to_be_linked" width="100" height="50" />
    <img src="<?php echo base_url();?>img/imagen.jpg" alt="Text caption" logndesc="url_to_be_linked" width="100" height="50" />
    <img src="<?php echo base_url();?>img/imagen.jpg" alt="Text caption" logndesc="url_to_be_linked" width="100" height="50" />
</div>

<script type="text/javascript" src="<?php echo base_url();?>js/jquery-latest.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/ImageFlow/imageflow.js"></script>
<script type="text/javascript">
var url = "<?php echo base_url();?>";
$(document).ready(function(){
var imageFlow = new ImageFlow();
imageFlow.init({ ImageFlowID: 'slider',
buttons: true,slider: true,
base_url: url
});
});
</script>

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!

Leave a Reply

Your email address will not be published. Required fields are marked *