ImageFlow en CodeIgniter

You can read the English version of this post in http://phpsblog.agustinvillalba.com/imageflow-codeigniter/

En esta ocasión voy a explicar cómo incluir la librería JavaScript llamada ImageFlow dentro del framework CodeIgniter y conseguir que funcione a la primera ¡lo cual no es fácil! A continuación explicaré unas pequeñas modificaciones en el código de la librería. Luego veremos un ejemplo de código de inlcusión y por último veremos el módulo PHP necesario para el correcto funcionamiento. Pero primero qué es la librería ImageFlow y para qué sirve.

Qué es ImageFlow y para qué sirve

ImageFlow es una librería JavaScript que nos permite añadir una galería de imágenes realmente elegante en nuestro sitio web de una forma muy sencilla, dándole un aspecto Flash sin los inconvenientes que esa tecnología puede acarrear. De esta forma podemos mostrar nuestra galería de imágenes cómo deseemos, dado que tiene un gran número de parámetros de configuración, para darle el aspecto y comportamiento que más nos guste o convenga a nuestro sitio. Pero dejémonos ya de hablar y vamos a lo importante, la integración en CodeIgniter.

Integrando ImageFlow en CodeIgniter

Partiremos de la base de que ya tenemos descargado e instalado el framework CodeIgniter en nuestro sitio web. Así que, lo primero que necesitamos es descargarnos la librería, la cual tiene licencia Creative Commons si la utilizaremos en un sitio web no comercial, en caso contrario hemos de abonar una licencia de explotación, podéis encontrar toda esta información sobre la licencia en la propia página de descarga. Una vez nos hemos descargado la librería, creamos un directorio «js» en la raíz de nuestro sitio web, al mismo nivel que el directorio «system» propio de CodeIgniter. Dentro de esa carpeta colocaremos el directorio «ImageFlow» tras descomprimirlo. Si queremos podemos prescindir del archivo index.html y del directorio img dentro de ImageFlow, dado que no son más que de ejemplo de uso de la librería.

Una vez tenemos la librería dentro de nuestra aplicación CodeIgniter podemos empezar a trabajar para hacer que funcione a la perfección. Lo primero que necesitamos es editar el archivo imageflow.js en dos líneas. La primera es añadir una nueva opción a la librería, para poder pasarle la URL de nuestra aplicación a ImageFlow, exactamente en la línea número 69:

...
startAnimation:     false,          /* Animate images moving in from the right on startup */
xStep:              150,
base_url:           ''
}
...

La siguiente modificación será en la línea número 157, donde añadimos la url para referenciar correctamente la imagen a añadir:

...
var src = node.getAttribute('src',2);
src =  thisObject.base_url + 'js/ImageFlow/reflect'+version+'.php?img='+src+thisObject.reflectionGET;
node.setAttribute('src',src);
...

Con esto ya tenemos preparada la librería para interactuar con CodeIgniter. Ahora vamos a llamar a la librería desde nuestra vista, para ello necesitamos el siguiente código:

<div id="slider" class="imageflow">
<img src="<?php echo base_url();?>img/imagen1.jpg" alt="Texto a mostrar con la imagen" logndesc="url_a_la_que_enlaza_la_img" width="100" height="50" />
<img src="<?php echo base_url();?>img/imagen2.jpg" alt="Texto a mostrar con la imagen" logndesc="url_a_la_que_enlaza_la_img" width="100" height="50" />
<img src="<?php echo base_url();?>img/imagen3.jpg" alt="Texto a mostrar con la imagen" logndesc="url_a_la_que_enlaza_la_img" 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>

Con esto ya tenemos integrada la librería en nuestra aplicación. Puedes encontrar más ayuda en la sección de documentación de la librería. Ya tan sólo nos falta configurar adecuadamente nuestro servidor.

Configurando nuestro servidor PHP

Dado que la librería necesita generar dinámicamente las imágenes finales a partir de las originales que nosotros le pasamos, nuestro servidor necesita tener instalado el módulo php5-gd para poder generar los gráficos.

Con esto ya tenemos integrada la librería ImageFlow en nuestra apliación construida con CodeIgniter.

You can read the English version of this post in http://phpsblog.agustinvillalba.com/imageflow-codeigniter/