Ir directamente al contenido de esta página

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]

Esta entrada se publicó el 24 de marzo de 2010, se archivó en Diseño, JavaScript, y fue etiquetada como . Autor: Saúl González Fernández. Hay 10 comentarios ›.

Comentarios

  1. MADrod dice:
    12/05/2010 a las 13:47

    Muy buen post!!
    Imagino que compartiste ese descubrimiento con el autor del EasySlider.
    Saludos

  2. Saúl González dice:
    13/05/2010 a las 13:13

    Muchas gracias por el comentario.

    La verdad es que no lo hemos compartido, porque pensamos que cuando se publica un JavaScript el autor lo ha hecho de la manera que ha considerado más oportuna, y que es trabajo de cada uno adaptarlo a sus necesidades.

    Justo ahora, nosotros acabamos de publicar uno, y como decimos al final, el script hace lo que hace. Si alguien necesita algo más, siempre puede modificarlo…

  3. Alicia dice:
    22/05/2010 a las 11:19

    ¡¡Pero como diablos se le puede cambiar el tamaño!!
    Me ha llegado a desesperar.

  4. Saúl González dice:
    27/05/2010 a las 10:48

    En la versión original del plugin, el tamaño de las diapositivas es el ancho de las imágenes que se incluyen en la lista que se va a convertir en el carrusel.

    En nuestra versión, el ancho es el valor computado de los li, por lo que les puedes asignar un tamaño en la CSS, bien especificándolo para esos mismos li, o bien asignándoselo al div que contiene la lista.

  5. LALINSKY dice:
    05/07/2011 a las 23:58

    Hola, ¿hay alguna forma de descargar el ejemplo de carrusel de imagenes horizontales y el Easy Slider? Gracias.

  6. Saúl González dice:
    07/07/2011 a las 12:17

    Puede probar en su navegador Archivo → Guardar como… → Página web, completa.

  7. Victor dice:
    10/08/2011 a las 1:23

    ¿Es posible de alguna manera asignar un tiempo el cual deba mostrarse cada imagen? Entiendo que hay una opcion “pause:” con tiempo en milisegundos, pero es para todas las imágenes el mismo tiempo… ¿Se podrá asignar un tiempo independiente a cada imágen?

  8. Saúl González dice:
    10/08/2011 a las 13:22

    No creo… el parámetro pause lo emplea el autor como tiempo de espera para el setTimeout con el que lanza la función que crea la animación.

  9. jorge dice:
    30/12/2011 a las 16:45

    ¿Alquien puede decirme cómo asignarle mis propios controles?, osea una lista que haga yo y que al dar clic deslize se contenido…

  10. Saúl González dice:
    01/01/2012 a las 21:17

    @jorge: Revisa la documentación del plugin: http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider.

¿Algún comentario?

* Los campos con un asterisco son necesarios

Últimos proyectos

© Digital Icon, S.L., 2007 – 2012