Artículo por Olo Man escrito para OloBlogger, visita su blog
¿Tenéis jQuery en vuestro blog y espacio para insertar 10 líneas de código? Sí la respuesta es afirmativa y además queréis tener un carrusel de imágenes automático, este es el código más simple que he visto hasta la fecha y seguro que no hay otro que lo sea mucho más. Si acaso con algún que otro carácter menos, pero pocos, pocos menos.
Ese código que después veremos y una sucesión de imágenes simples metidas dentro de una caja, con un contenedor general común, nos daría este resultado:
Por empezar desde cero, si no tenemos jQueryprimero añadimos esta línea justo después de }]]></b:skin> para cargar esta conocida librería:
Una vez seguros de que tenemos la librería en nuestra plantilla, a continuación de esa misma línea añadimos lo que hace que la serie de imágenes funcionen como slider:
Podemos guardar los cambios en la plantilla porque eso es todo. Es simple pero veréis que funciona y hace lo que tiene que hacer. Ahora ya sólo tenemos que poner las imágenes dónde queremos que aparezcan, de la manera que veremos a continuación.
Con esto anterior en nuestra plantilla (aunque nada impide ponerlo directamente en un gadget, en una página o incluso en una entrada como veis aquí) ya podremos crear un visor como el que habéis visto arriba. Sólo tenemos que usar esta estructura HTML para añadir las imágenes:
No sé cómo lo veis pero ya está todo lo necesario.
Para mí esto es bastante ligero y eficiente, mucho más que la mayoría de librerías que se usan quizás demasiado habitualmente.
Los tres últimos números del plugin permiten ajustar algunas cosillas. Todos van expresados en milisegundos (4000 = 4 segundos)
Y para los curiosos que quieren aprender cosas...
$('#slider div:gt(0)').hide();
Con gt(x) seleccionamos todos los div a partir del número x. En este caso 0 es el primero, así que lo que hacemos con esta línea es esconder (hide) todas las cajas excepto la primera, que será la imagen inicialmente visible.
setInterval(function(){ [lo que haremos] }, 4000);
Necesitamos reiterar una serie de cosas cada cierto tiempo y eso lo hacemos con setInterval, indicando el tiempo de retardo entre cada serie.
$('#slider div:first-child').fadeOut(0)
Dentro de cada uno de esos intervalos hacemos desaparecer (fadeOut) la primera caja (div:first-child) que haya en la relación de imágenes...
.next('div').fadeIn(1000)
... y hacemos que la siguiente caja (next) aparezca poco a poco (fadeIn).
.end().appendTo('#slider');
Por último tomamos la que hasta ese momento es la primera imagen y la situamos al final (appendTo) de la "lista".
end() resetea el contador de elementos que hicimos avanzar con next(). De esa manera, el primer hijo que antes hicimos desaparecer es el que enviamos al final de la pila y no la imagen que ahora tenemos visible. Para el siguiente ciclo la que hasta este momento era visible (que era la segunda) será la primera y por tanto la que haremos desaparecer.
Referencias sobre las funciones usadas:
Como habéis visto no es necesario CSS para que el slider funcione, pero si lo usamos podremos cambiar su aspecto, permitir el uso de imágenes de diferente tamaño, incluir rótulos e incluso mejorar la transición. A continuación algunas ideas.
Limitar el tamaño del contenedor general y evitar el desbordamiento para que las imágenes más grandes no ocupen más espacio. Y ya que estamos le ponemos unas esquinas redondeadas, un borde y lo centramos. El position:relative nos vendrá bien para otra cosa que haremos después.
Si situamos las cajas padre de las imágenes de manera absoluta con respecto al contenedor general (para eso pusimos antes el relative), estas se dispondrán solapadas una encima de otra. De esta manera al fadeOut le podremos dar un tiempo para que sea "visible" (hemos cambiado el 0 por un 1000) y la transición entre imágenes más suave. Es esa mezcla de imágenes que se produce en la segunda demo.
En las imágenes, el max-width nos sirve para que siempre ocupen todo el ancho y el min-height para que aunque sean deformadas, no se nos quede hueco por debajo cuando sean de menos de 300px de alto.
Y ya si queremos añadir otros elementos sobre las imágenes (en este ejemplo un texto), sólo tendremos que etiquetarlos con un span o como párrafo (p) y en el CSS posicionarlos de manera absoluta, ubicándolos en el lugar exacto dónde queramos con top/bottom - left/right.
El marcado en el HTML para esto último, incluyendo además un enlace sobre la imagen, sería tal que así:
¿Tenéis jQuery en vuestro blog y espacio para insertar 10 líneas de código? Sí la respuesta es afirmativa y además queréis tener un carrusel de imágenes automático, este es el código más simple que he visto hasta la fecha y seguro que no hay otro que lo sea mucho más. Si acaso con algún que otro carácter menos, pero pocos, pocos menos.
Ese código que después veremos y una sucesión de imágenes simples metidas dentro de una caja, con un contenedor general común, nos daría este resultado:
1. Instalación JavaScript necesario
Por empezar desde cero, si no tenemos jQueryprimero añadimos esta línea justo después de }]]></b:skin> para cargar esta conocida librería:
Una vez seguros de que tenemos la librería en nuestra plantilla, a continuación de esa misma línea añadimos lo que hace que la serie de imágenes funcionen como slider:
Podemos guardar los cambios en la plantilla porque eso es todo. Es simple pero veréis que funciona y hace lo que tiene que hacer. Ahora ya sólo tenemos que poner las imágenes dónde queremos que aparezcan, de la manera que veremos a continuación.
2. Crear el slider
Con esto anterior en nuestra plantilla (aunque nada impide ponerlo directamente en un gadget, en una página o incluso en una entrada como veis aquí) ya podremos crear un visor como el que habéis visto arriba. Sólo tenemos que usar esta estructura HTML para añadir las imágenes:
No sé cómo lo veis pero ya está todo lo necesario.
Para mí esto es bastante ligero y eficiente, mucho más que la mayoría de librerías que se usan quizás demasiado habitualmente.
Ajustes
Los tres últimos números del plugin permiten ajustar algunas cosillas. Todos van expresados en milisegundos (4000 = 4 segundos)
- fadeOut(0): Tiempo en desaparecer la imagen saliente
- fadeIn(1000): Tiempo en aparecer la imagen entrante
- ('#slider');},4000): Tiempo de permanencia de cada imagen
Cómo funciona
Y para los curiosos que quieren aprender cosas...
$('#slider div:gt(0)').hide();
Con gt(x) seleccionamos todos los div a partir del número x. En este caso 0 es el primero, así que lo que hacemos con esta línea es esconder (hide) todas las cajas excepto la primera, que será la imagen inicialmente visible.
setInterval(function(){ [lo que haremos] }, 4000);
Necesitamos reiterar una serie de cosas cada cierto tiempo y eso lo hacemos con setInterval, indicando el tiempo de retardo entre cada serie.
$('#slider div:first-child').fadeOut(0)
Dentro de cada uno de esos intervalos hacemos desaparecer (fadeOut) la primera caja (div:first-child) que haya en la relación de imágenes...
.next('div').fadeIn(1000)
... y hacemos que la siguiente caja (next) aparezca poco a poco (fadeIn).
.end().appendTo('#slider');
Por último tomamos la que hasta ese momento es la primera imagen y la situamos al final (appendTo) de la "lista".
end() resetea el contador de elementos que hicimos avanzar con next(). De esa manera, el primer hijo que antes hicimos desaparecer es el que enviamos al final de la pila y no la imagen que ahora tenemos visible. Para el siguiente ciclo la que hasta este momento era visible (que era la segunda) será la primera y por tanto la que haremos desaparecer.
Referencias sobre las funciones usadas:
Variantes y personalización
Como habéis visto no es necesario CSS para que el slider funcione, pero si lo usamos podremos cambiar su aspecto, permitir el uso de imágenes de diferente tamaño, incluir rótulos e incluso mejorar la transición. A continuación algunas ideas.
Cuestión de centímetros
No sabe hablar, pero se fija mucho
Limitar el tamaño del contenedor general y evitar el desbordamiento para que las imágenes más grandes no ocupen más espacio. Y ya que estamos le ponemos unas esquinas redondeadas, un borde y lo centramos. El position:relative nos vendrá bien para otra cosa que haremos después.
Si situamos las cajas padre de las imágenes de manera absoluta con respecto al contenedor general (para eso pusimos antes el relative), estas se dispondrán solapadas una encima de otra. De esta manera al fadeOut le podremos dar un tiempo para que sea "visible" (hemos cambiado el 0 por un 1000) y la transición entre imágenes más suave. Es esa mezcla de imágenes que se produce en la segunda demo.
En las imágenes, el max-width nos sirve para que siempre ocupen todo el ancho y el min-height para que aunque sean deformadas, no se nos quede hueco por debajo cuando sean de menos de 300px de alto.
Y ya si queremos añadir otros elementos sobre las imágenes (en este ejemplo un texto), sólo tendremos que etiquetarlos con un span o como párrafo (p) y en el CSS posicionarlos de manera absoluta, ubicándolos en el lugar exacto dónde queramos con top/bottom - left/right.
El marcado en el HTML para esto último, incluyendo además un enlace sobre la imagen, sería tal que así:
-Redactado por Olo Man para OloBlogger Link
