Volviendo fluido Easy Slider 1.7

En uno de nuestros últimos proyectos decidimos incluir un carrusel de imágenes en la portada del sitio. No obstante, no nos bastaba con aplicar un plugin sin más, puesto que queríamos que el diseño se mantuviese fluido. Modificando ligeramente el código de Easy Slider, conseguimos el resultado que estábamos buscando.

Existen varios plugins que crean la interfaz que hemos indicado sobre jQuery —para el proyecto hemos empleado la versión 1.2.3—, pero elegimos Easy Slider —versión 1.7— de Alen Grakalic, porque es el que nos parece más completo y el que mejor degrada en ausencia de JavaScript. No obstante, al incluirlo en nuestro diseño fluido, nos encontramos con un inconveniente.

El problema

Al trabajar en el boceto, creamos una lista con las imágenes que Easy Slider debía animar. En principio el diseño se había concebido para una resolución de 1024×768, lo que nos daba un ancho para cada imagen de unos 700 píxeles. Manteniendo ese tamaño y la resolución, el resultado era el esperado…

La prueba, a 1024×768 [Firefox 3.6]

…pero al modificar la resolución de pantalla y extenderse la superficie total de la página, los botones de control quedaban descolgados del carrusel:

La prueba, a 1280×1024 [Firefox 3.6]

Éste es el ejemplo, pero para quien no quiera tener que andar cambiando la configuración de su pantalla dejamos una captura a una resolución de 1024×768 (PNG, 256Kb) y otra a 1280×1024 (PNG, 281Kb).

Para convertir el carrusel en un elemento fluido, trasladamos las imágenes —después de haber aumentado su ancho— del código de la página a la hoja de estilo como fondo de cada uno de los li de la lista; así, la caja de los mismos se extendería el ancho total de su elemento padre, y revelaría mayor o menor porción de la imagen de fondo.

Pero no:

Ciertamente, no es el efecto buscado [Firefox 3.6]

¿Qué es lo que ocurre? Easy Slider emplea el ancho de los li para calcular el ancho total del ul padre, que es el que anima. El ancho del ul es el resultado de la suma de los anchos de los li tras haber sido flotados a la izquierda. Al eliminar las imágenes de los elementos de lista y posicionar de manera absoluta los textos que las acompañaban, el ancho de cada li es 0, y por tanto el ancho a animar del ul es igualmente 0. Por ello, el carrusel desaparece.

La solución

Aquí es donde se puede distinguir a alguien que se ha preocupado por aprender JavaScript de quien sólo sabe ajustar ejemplos de uso de la documentación de las librerías más populares. Lo único que necesitábamos era que Easy Slider asignara a los li su ancho computado antes de continuar con su funcionamiento normal.

Revisando el código del plugin, nos percatamos de que Grakalic almacena ese valor en la variable w. Gracias a ello, sólo hay que hacer una pequeña modificación en la línea 80 del script…

if(!options.vertical) $("li", obj).css({'float':'left','width':w}); 
	

…y listo.

Ahora sí, nuestro carrusel de imágenes es fluido [Firefox 3.6]

Etiquetas: jquery.

Esta entrada se publicó el 24 de Marzo de 2010 a las 10:55, y se archivó en Diseño, JavaScript. Autor: Saúl González. Puede seguir los comentarios de esta entrada a través de RSS 2.0. Puede dejar un comentario o hacer un trackback desde su propio sitio.