Blog de siibil.com

Bueno bueno, sé que a muchos os gusta la forma de pasar los regalos en siibil, como si estuvierais jugando con un iPod touch/iPhone o el iTunes… así que os voy a contar cómo se puede hacer para que lo tengáis en vuestra web.

Primero de todo saber que como base he utilizado ImageFlow, una librería javascript que me ha facilitado mucho la tarea, y se puede descargar en la web del autor.

Nota: Algunas de las cosas que os diga aquí puede que no sean exactas en relación a la versión que os bajéis de imageflow, ya que puede haber cambiado desde el día en que yo implementé mi propio siibilflow.

En el fichero imageflow.js está el código necesario para el funcionamiento., así como la configuración básica. Yo personalmente he cambiado algunos de los parámetros para que se adapten a mis necesidades.

Para cambiar los estilos del imageflow hay que modificar el fichero imgeflow.css. ¡Ojo con las posiciones absolutas y relativas de los elementos!

Añadiendo contenido personalizado a los captions

El caption en siibilflow es la zona dónde mostramos los datos del regalo, el pie de la foto.

En principio, con imageflow, sólo podemos poner un texto aquí. Pero si modificamos un poco el código, es fácil añadir cualquier cosa. Ahora os explico cómo hacerlo.

En la función glideTo es dónde se añade el caption a las imágenes cada vez que esta pasa a primer plano. Si buscáis, veréis una línea parecida a esta:

var caption = thisObject.imagesDiv.childNodes[imageID].getAttribute(’alt’);

Lo que hace es coger el atributo alt de la imagen para ponerlo como caption. Yo personalmente he preferido maquetar a parte unos divs con el contenido del caption, y ponerles unos IDs que se puedan asociar con el regalo. Por ejemplo:

<div id=’caption_id_<?php echo $alt ?>’ class=’captions’>
<?php echo $regalo->getNombre() ?>
…
</div>

Luego en el atributo alt de la imagen sólo tenemos que poner el ID del div asociado. De este modo, si cambiamos la línea que hemos visto antes por las dos siguientes conseguiremos que dentro del caption se inserte el código que haya dentro del div.

div_id = img_div.childNodes.item(array_images[caption_id]).getAttribute(’alt’);
caption = document.getElementById(’caption_id_’ + div_id).innerHTML;

Ya sé que también se puede hacer poniendo todo el código HTML que queramos dentro del alt, aunque encuentro este método muy poco elegante. Además, después utilizaré esos divs (captions) para crear una lista de regalos alternativa sin imageflow, pero eso ya es otro tema.

Linkar a otra página

El imageflow esta pensado originalmente como una galería de fotos, así que al pinchar sobre una imágen la vemos ampliada.

Si lo queremos usar, como en el caso de siibilflow, para navegar entre diferenta páginas, debemos poner en el atributo longdesc de la imagen la URL de destino.

Desactivar la navegación con la rueda del ratón

Sí, en la primera versión de siibilflow era posible pasar los regalos con un simple movimiento de la rueda del ratón, que tiempos más buenos…  :_(

Pero a Miquel no le gustaba esto, puede que porque con el ratón de su Mac era difícil posicionarse bien, o porque en las pruebas de usuario tampoco gustó demasiado…

Pero bueno, a lo que vamos, si por alguna razón que no logro a comprender qureis desactivar esta funcionalidad, sólo debeis comentar la línea que activa el listener del evento cuando cargamos en imageflow, es esta:

initMouseWheel();

Imágenes con reflejo, un consejo

Una de las cosas que le dan más personalidad al imageflow son los reflejos de las imágenes. Para hacer esto en la web del autor recomiendan una libreria en php para crearlas dinámicamente. En siibil.com mostramos 50 regalos por página, si tubieramos que generar estas imágenes cada vez que se cargara una página de resultados, los tiempos de espera en el servidor podrían dispararse.

Lo que hacemos es crear la imagen con reflejo cuando se inserta un regalo, de este modo ya la tenemos guardada y sólo tenemos que cargarla normalmente. Pensar bien el color de fondo que vais a utilizar, ya que se van a crear las imágenes reflejadas sobre ese color. Si luego cambiais el fondo de la web se tendrán que generar de nuevo todas las imágenes.