my name is Crysfel Villa

Runner & Software Developer

Hi there ! My name is Crysfel, I'm a Software Developer with more than 7+ years of experience, when I'm not coding with JavaScript, Ext JS or Sencha Touch, I'm probably writing a tutorial, playing my guitar or running outside.

Phone : +1 571 426 9183 Mail : crysfel@bleext.com

Carrusel de imagenes

Carrusel de imagenes

Hoy quiero mostrar un poco de lo que se puede hacer con mootools, se trata de un carrusel de imágenes, muy sencillo, puedes ver el ejemplo para que me entiendas mejor.

Ahora voy a explicar como es que lo he hecho, veras que es algo muy sencillo. Primero es necesario descargar la última versión de mootools, luego lo importas a tu documento.

UPDATE:
He escrito un tutorial sobre como hacer esto mismo con mootools1.2, ademas explico como escribir una clase correctamente utilizando todo el potencial de mootools, te recomiendo ir a leer el nuevo tutorial.

Para importarlo al documento unicamente es necesario hacer esto:


Acontinuación muestro el XHTML necesario para el carrusel.

Como puedes ver, hay una capa contenedora de dos capas, las capas de adentro son para almacenar temporalmente las imágenes e irlas rotando, estoy utilizando dos, porque cuando se realiza la transición la imagen actual se desvanece, y la imagen siguiente aparece, ambos efectos al mismo tiempo.

Lo siguiente es acomodar estas capas una encima de la otra y darle el tamaño de las imágenes, esto lo hago con CSS.


#contenedor{
position:relative;
width:100%;
}
#img1{
width:420px;
height:294px;
background-image:url('galeria/intro/01.jpg');
}

#img2{
position:absolute;
top:0px;
left:0px;
width:420px;
height:294px;
}

Con esto únicamente estoy modificando las posiciones y asignando las imágenes iniciales, si te fijas la capa contenedora la posicione relativa, esto lo hice para hacer la capa IMG2 absoluta, de esta manera puedo mover la capa img2 a las coordenadas especificas, ósea, ponerla sobre la capa img1. Otro punto importante a destacar aqui, es que si el usuario no tiene habilitado JavaScript, aparecerá simplemente la imagen uno, no habrá efecto, pero podrá ver una imagen.

Lo siguiente es hacer un objeto que le llamaré Animación, este objeto le voy a pasar dos parámetros en el constructor, uno es la url donde están alojadas la imágenes a mostrar, y el otro es el numero máximo de imágenes a desplegar, el directorio de imágenes, debe de contener las imágenes nombradas numéricamente en orden ascendente, es decir deben llamarse 01.jpg, 02.jpg,03.jpg, etc.

Hasta este punto el código debe estar asi:


function Animacion(base,max){
this.base = base;
this.cont = 1;
this.img1 = true;
this.maximo = max;
}

Las propiedades del objeto son base, que es el directorio donde se alojan las imágenes, cont, es un contador secuencial, se incrementará a uno por cada ejecución de la transición, img1 es una variable booleana que indica únicamente si el div img1 es el que sale o no, maximo es la variable que contiene el maximo numero de imágenes, al llegar con a este numero, se reinicia.

Ahora sigue hacer una función a la cual llamaré inicia, la cual va a levantar un temporizador que se ejecutará cada tres segundos.


this.inicia = function(){
(function(){
//se incrementa el contador
this.cont++;
//al llegar al maximo la animacion se inicia
if(this.cont > this.maximo)
this.cont = 1;
var im = 'img1';
var prefix = this.cont+'.jpg';
if(this.cont<10)
prefix = '0'+this.cont+'.jpg';
if(this.img1){
this.img1 = false;
im = 'img2';
}else
this.img1 = true;
//se asigna la nueva imagen a la capa que no se esta viendo
$(im).style.backgroundImage = 'url('+this.base+'/'+prefix+')';
//se desaparece la capa con la nueva imagen
new Fx.Style(im, 'opacity').set(0);

//esta funcion espera un segundo antes de ahcer la transición
(function(){
//crea el efecto para las dos capas
var x = new Fx.Style('img1', 'opacity');
var y = new Fx.Style('img2', 'opacity');
//aparece y desaparece las capas
if(this.img1){
x.start(0,1);
y.start(1,0);
}else{
x.start(1,0);
y.start(0,1);
}

}
).delay(1000,this);
}
//Este es el temporizador, se ejecutará cada tres segundos
).periodical(3000,this);
}

He comentado las partes mas importantes del código, espero esté claro, y si existe alguna duda o comentario puedes dejarlo con toda confianza.

El código completo es el siguiente:


"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">






Hasta la próxima!

Comments

19 thoughts on “Carrusel de imagenes”

  1. alejandro says:

    POrque pones dos div no es necesario solo 1

  2. Crysfel says:

    Utilizo dos divs, por que hago una transición entre una imagen y otra, pudiese utilizar uno solo, pero no sería el mismo efecto, el efecto actual funciona asi:

    La imagen actual se desvanece, mientras la nueva imagen aparece, al mismo tiempo, si utilizara un solo div, entonces, la imagen actual desaparecería y despues aparecería la nueva imagen.

  3. JM says:

    ¿Cuales son exactamente los archivos que hay que descargar del sitio web de mootools? Gracias

  4. Crysfel says:

    Muy buen punto! personalmente siempre descargo todo el API, de aprox 35kb, pero si solo quieres descargar las clases que se utilizan para este ejemplo, selecciona la clase Window.DomReady, Fx.Styles y se seleccionaran automaticamente sus dependencias.

    No lo he probado, pero me parece ser que estas son las unicas que se utilizan en este ejemplo ;-)

  5. JM says:

    Gracias

    También me gustaría saber como conseguir que el efecto de transición entre imágenes ocurra más despacio

  6. Crysfel says:

    Para eso simplemente agregale mas segundo al temporizador justo en esta linea

    //Este es el temporizador, se ejecutará cada tres segundos
    ).periodical(3000,this);

    ese 3000 son tres segundos, ponle 10000 y seran 10 segundos ;-)

  7. ceaped says:

    Hola.
    Hice el ejercicio tal cual pero cuando se difumina la primera imagen, no se vuelven a ver más imagenes, se queda como cargando, te lo digo porque en la parte inferior izquierda del navegador dice cargando.
    Que puede hacerme falta.
    Gracias por su ayuda

  8. gustavo says:

    Yo quiero hacer el efecto de la transicion entre una y otra mas lento, se puede? no cada cuanto se cambia de una a otra, sino el efecto de transicion

    gracias

  9. Crysfel says:

    @Gustavo mira, te recomiendo leer este tutorial que escribi http://www.crysfel.com/index.php/2008/02/13/carrusel-de-imagenes-con-mootools12/ esta mejor y mas explicado.

    saludos.

  10. ADAN says:

    UNA PREGUNTA ESTOY PROBANDO EL CODIGO, Y ME ENCONTRE CON QUE NO VISUALIZA NINGUNA IMAGEN, NO SE QUE HICE MAL!

  11. crysfel says:

    @ADAN es posible que no estes importando correctamente la librería de mootools, o quizas no le estes pasando la URL correcta de donde estan alojadas tus imáagenes.

    De todas formas, te recomiendo hacerlo de esta manera http://www.crysfel.com/index.php/2008/02/13/carrusel-de-imagenes-con-mootools12/

  12. ADAN says:

    GRACIAS MUY BUEN APORTE, EXCELENTE! UTILIZE EN EJEMPLO QUE PUSISTE EN EL LINK,GRACIAS, UNA DUDA QUIERO AGREGARLES VINCULOS A LA IMAGENES EN QUE PARTE DEL CODIGO LOS VINCULOS?

  13. ADAN says:

    GRACIAS MUY BUEN APORTE, EXCELENTE! UTILIZE EN EJEMPLO QUE PUSISTE EN EL LINK,GRACIAS, UNA DUDA QUIERO AGREGARLES VINCULOS A LA IMAGENES EN QUE PARTE DEL CODIGO AGREGA LOS VINCULOS? E ESTOD INTENTADO PERO NO LO PUEDO ARREGLAR!

  14. etzekiel says:

    De entrada era lo que andaba buscando… escribo antes de comprender, sin duda esto va a estar interesante… gracias por el aporte se mira fàcil…

  15. Peter says:

    Tío, como informático serás bueno, pero enseñando lo haces muy mal. Ya he perdido bastante tiempo intentando implementar esta historia que funciona como el culo. Algo falla en tus explicaciones chaval. Mejor no te dediques a enseñar.
    Bye

  16. Crysfel says:

    @Peter
    Si, para hacer este tutorial necesitas ciertos conocimientos de programación, no mu complejos pero si básicos que no expliqué en este tutorial, veo que estas frustado de que no te ha salido, pero eso no significa que a nidie le ha salido.

    saludos y sigue esforzandote.

  17. UISDGY says:

    jajajajaj a eso le llamas un carusel de imagines es solo uan mugre presentacion de flash me das risa mano y eres un informatico pesimo haz algo que valga la pena lammer

  18. Oscar says:

    Bueno amigo me parece excelente el tutorial pero quisiera saber lo de las librerias ya que yo utilizo debian y estoy aprendiendo esto de las website

  19. chris says:

    quien me puede hacer un carrucel de imagenes para acutalizarlo casi diario? y facil actualizar, que se le puedea agregar links y descriciones cortas como el de yahoo.com.mx

Leave a comment

Contact Information

Location :
Brooklyn Heights, NY, USA.

Email : crysfel@bleext.com
Web : www.bleext.com
Tel : +1 571 426 9183

Work hours :
Monday to Friday
From 9:00AM to 6:00PM EST