El carrusel de imágenes, retocado

El pasado 13 de mayo publicamos el script de un carrusel de imágenes que pesaba menos de 2Kb. Hoy publicamos una nueva versión, que incluye una mejora importante.

El problema

En la versión anterior, el script apila los elementos de la lista de las diapositivas y va variando la opacidad de los mismos. No obstante, la posición en la que se han apilado es fija. ¿Qué significa esto? Pues que si en los li se han incluido vínculos, sólo funcionará el del último elemento de la lista, que es el que se ha situado por encima de todos los demás.

Se ve más claro con un ejemplo. Esta página presenta unos vínculos sobre las imágenes, pero el que recibe el clic es siempre el tercero.

Bien, pues lo hemos corregido.

El nuevo script

Con la nueva versión del script, los vínculos activos son los de la diapositiva actual.

Éste es el nuevo código:


var DP = {
  ds: '',
  dA: 0,
  sD: 0,
  tD: 0,
  t: 3000,
  idD: 'diapos',
  nID: 'diapos-on',
  idC: 'contador',
  clC: 'actual',
  IE: false,
  anim: true,
  intv: '',
  lnz: '',
  $: function(el){
    var e = document.getElementById(el); return e;
  },
  op: function(el,v){
    if((v==0)||(v==100)){
      if(DP.IE){
        el.style.filter='alpha(opacity='+v+')';
        el.style.zIndex=v;
      } else {
        el.setAttribute('style','opacity:'+v/100+';z-index:'+v);
      }
    } else {
      (DP.IE) ? el.style.filter='alpha(opacity='+v+')' : el.setAttribute('style','opacity:'+v/100);
    }
  },
  ac: function(c){
    DP.$(DP.idC).getElementsByTagName('li')[DP.dA].className=c; 
  },
  fun: function(){
    var i = 100;
    (DP.dA==DP.tD) ? DP.sD = 0 : DP.sD = DP.dA+1;
    DP.intv = setInterval(function(){
      i = i-5;
      if(i>=0){
        DP.op(DP.ds[DP.dA],i);
        DP.op(DP.ds[DP.sD],(100-i));
      } else {
        DP.ac('');
        (DP.dA==DP.tD) ? DP.dA = 0 : DP.dA++;
        DP.ac(DP.clC);
        clearInterval(DP.intv);
        if(DP.anim){DP.lnz = setTimeout(DP.fun,DP.t);}
      }
    },50);
  },
  manual: function(d){
    clearInterval(DP.intv);clearTimeout(DP.lnz);DP.anim=false;
    DP.op(DP.ds[DP.dA],0);
    DP.op(DP.ds[d],100);
    DP.ac('');
    DP.dA=d;
    DP.ac(DP.clC);
  },
  inicio: function(){
    (navigator.userAgent.match('MSIE')) ? DP.IE = true : DP.IE = false; 
    DP.$(DP.idD).id=DP.nID;
    DP.ds = DP.$(DP.nID).getElementsByTagName('li');
    DP.tD = DP.ds.length-1;
    var ct = document.createElement('ul');
    ct.id = DP.idC;
    (DP.$(DP.nID).nextSibling) ? (DP.$(DP.nID).parentNode).insertBefore(ct,DP.$(DP.nID).nextSibling) : (DP.$(DP.nID).parentNode).appendChild(ct); 
    for(var i=0;i<=DP.tD;i++){
      DP.op(DP.ds[i],0);
      DP.$(DP.idC).innerHTML += '<li><a href="#" onclick="DP.manual('+i+')">'+(i+1)+'</a></li>';
    }
    DP.op(DP.ds[0],100);
    DP.ac(DP.clC);
    DP.lnz = setTimeout(DP.fun,DP.t);
  } 
}

La única diferencia con la versión anterior es que en la función op además de asignar una opacidad, modificamos los z-index para que el li actual siempre quede en un plano superior al del resto de elementos de la lista.

Ahora el script pesa 1,86Kb, y 1,49 minimizado.

Esta entrada se publicó el 5 de julio de 2010, se archivó en , y fue etiquetada como efectos javascript, en menos de 2Kb, javascript no obstrusivo. Autor: Saúl González Fernández. Hay 22 comentarios ›.

Comentarios

Rob dice:

24/02/2011 a las 9:50

Aparentemente la capa de enlace no funciona (al menos a mi) en IE. ¿Alguna sugerencia?
Saúl González dice:

24/02/2011 a las 12:58

¿Qué versión de Internet Explorer estás empleando? Acabo de probar la 8 (normal y en vista de compatibilidad) y no me da problemas…
Rob dice:

25/02/2011 a las 11:21

Pues es in Vista 64 con el IE versión 8.0.6001.19019 y lo que pruebo es el ejemplo que hay más arriba (URL: http://www.digitalicon.es/ejemplos/nuevo-carrusel/carrusel-01.htm).

Y tanto en modo normal como en modo compatibilidad, la capa blanca semitransparente donde aparecen los textos 01, 02 y 03 para cada una de las capas respectivamente, no sale. Y si haces click no hace el vínculo. De hecho, ni si quiera aparece el cursor de la mano.

Si te sirve de ayuda sólo me pasa en el IE.
Saúl González dice:

02/03/2011 a las 12:21

Vale, ya he localizado el problema.

Los vínculos no funcionan bien porque ese ejemplo que me comentas es de la versión anterior del script; si pruebas el ejemplo de la nueva (http://www.digitalicon.es/ejemplos/nuevo-carrusel/carrusel-02.htm) funcionan.

Sobre lo de que no aparezca la capa semitransparente, es porque en la hoja de estilo el fondo lo hemos aplicado con background:rgba(255,255,255,0.3);, y la sintaxis RGBa aún no tiene soporte en Explorer 8. Puedes lograr ese efecto con un PNG-24 semitransparente como imagen de fondo. Echa un vistazo a esta entrada que publiqué hace tiempo, igual te sirve de ayuda.
Bob dice:

02/03/2011 a las 18:51

Acabo de ver la respuesta #4. Mañana mismo lo pruebo. Muchas gracias por todo.
Antonio dice:

19/05/2011 a las 7:45

Saludos.

Felicidades por el tutorial, de los mejores que he encontrado, y claro, no he dudado en usarlo.
Más o menos todo bien, toqueteando algo, pero tengo un problema.

En la página donde lo he puesto, carga otras muchas cosas, y en principio, cargo 3 imágenes para este carrusel.

El problema lo tengo en que mientras carga todo, las 3 imágenes se me ven una a continuación de la otra… lógico ya que son… ¿cómo puedo hacerlo para que sólo se vea la primera… y las siguientes ya cuando empiece el carrusel?

Muchas gracias.
Saúl González dice:

21/05/2011 a las 8:48

Si te fijas en la CSS que hemos aplicado al carrusel, tenemos #diapos con un estilo que se ve cuando aún no se ejecuta el script y otro para #diapos-on cuando sí lo hace. Si quieres que desde un primer momento las imágenes aparezcan ya superpuestas, aplica a #diapos una posición relativa y este estilo a los elementos de la lista:
```
#diapos li{
  position:absolute;
  top:0;
  left:0;
  width:700px;
  height:350px;
  list-style:none;
}
 
```
No obstante, ten en cuenta que en este caso si el script falla el usuario se quedará sin la información de algunas de las imágenes.
Antonio dice:

23/05/2011 a las 14:25

Perfecto… Funcionó, muchas gracias.
Jorge dice:

12/06/2011 a las 13:55

No hay nada como leer, ya me he dado cuenta, en CSS colocas las imagenes de precarga en la posición absoluta, gracias.
Manolo dice:

27/02/2012 a las 2:30

Hola Saúl, una pregunta, ¿cómo se podría poner un vinculo a la imagen? En este ejemplo el vínculo se ejecuta cuando clicamos en las letras 01, 02…

Saúl González Fernández dice:

27/02/2012 a las 8:47

@Manolo: Tienes que modificar el marcado para que la imágen quede dentro del vínculo:


<ul id="diapos">
  <li><a href="#d01"><img src="01.jpg" alt="" height="350" width="700" /></a></li> 
  <li><a href="#d02"><img src="02.jpg" alt="" height="350" width="700" /></a></li> 
  <li><a href="#d03"><img src="03.jpg" alt="" height="350" width="700" /></a></li> 
</ul>

Manolo dice:

05/03/2012 a las 19:40

Hola Saúl, por mas que miro y remiro no encuentro por ningun sitio la forma de saber cómo insertar los codigos en mi web, ¿podrías decirme dónde puedo encontrar algo? Lo pruebo en Dreamweaver y funciona perfecto, lo único es que he subido el .js a mi hosting y cuando inserto la ruta no me funciona, sólo funciona cuando está en el mismo directorio.
Saúl González Fernández dice:

06/03/2012 a las 8:54

@Manolo: Por lo que me comentas del directorio es posible que la ruta que vincula al .js sea errónea. En la cabecera del ejemplo verás una línea como ésta:
```
<script type="text/javascript" src="DP.js"></script>
 
```
Asegúrate que src apunta a la localización correcta del script.

Si quieres mándame una dirección de prueba de la página por medio del formulario de contacto y veré si puedo echarte una mano.
Jose dice:

28/02/2013 a las 19:28

¿Cómo puedo quitar los cuadraditos o circulitos en el ultimo script que al picar en ellos selecciona una imagen? Quiero quitarlos o a ser posible que salgan sobre la imagen.
Saúl González Fernández dice:

01/03/2013 a las 12:48

@Jose: Ese control de diapositivas es un ul con el id que indique en la variable idC del JavaScript, por lo que le puedes asignar por CSS el estilo y posición que quieras.

Nuestro consejo es que no elimines el control, porque mejora la accesibilidad del carrusel.
Diego Ernesto Vitteri Murga dice:

13/01/2015 a las 14:54

¡Muchísimas gracias por este script mejorado! Gracias por toda la ayuda 🙂
Luis Leal dice:

05/10/2015 a las 3:06

Hola Saúl. Muchas gracias por este gran aporte.

Te reporto una situación: he adaptado el javascript para pasar aleatoriamente entre imágenes, pero hay un problema, cuando se hace clic en el control, seleccionado alguna de las imágenes, efectivamente va a la imagen pero no vuelve a cambiar aleatoriamente, se queda allí en esa misma imagen.
Saúl González Fernández dice:

05/10/2015 a las 9:08

@Luis: Ese funcionamiento es intencionado. Nuestro planteamiento es que si el usuario ha decidido emplear la selección manual es porque tiene algún problema con la automática —el cambio de imagen es demasiado rápido, le molesta el movimiento en la pantalla, etc.—, por lo que no volvemos a activarlo: sería volver a imponerle una característica que activamente ha desechado.
Luis Leal dice:

05/10/2015 a las 22:00

Muchas gracias por tu respuesta. Por último quisiera preguntarte qué modificación se podría hacer para que cargue las imagenes on-demand, es decir, que no las cargue todas al comienzo, sino que vaya cargando a medida que selecciona la imagen para mostrar. ¡Muchas gracias! Voy a usar tu carrusel para mostrar los logos de las ONGs aliadas (31) en un proyecto comunitario. Muy útil.
Saúl González Fernández dice:

06/10/2015 a las 8:40

@Luis: Se me ocurre que puedes incluir la imagen inicial en el marcado, y que la función del setInterval actualice su atributo src según una matriz con las URL de las imágenes del carrusel. No obstante, ten en cuenta que si algo falla en el script tu usuario sólo verá la primera imagen.
Carlos Marin dice:

25/11/2016 a las 1:42

Buenas Saúl, soy estudiante en un instituto de un curso de Diseño Pág. Web, en un proyecto utilizó el código de tu ejemplo del carrusel, espero no ser abusivo, solo que desearía saber como hiciera para poder incluir un texto (tipo párrafo) al pie de la imagen que se presenta. Vi tu ejemplo del 2do Script; texto sobre la imagen, pero no es lo deseado, ¿me podrias dar una luz? Gracias de antemano por todos tus aportes.
Saúl González Fernández dice:

30/11/2016 a las 10:43

@Carlos: En el interior de los li puedes incluir un elemento con el texto al que puedes posicionar y dar estilo como necesites, por ejemplo:
```
<li>
  <img src="01.jpg" alt="" height="350" width="700" />
  <span class="txt">Texto sobre la imagen</span>
</li>
```