Ir directamente al contenido de esta página
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.
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.
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.
Somos un pequeño estudio fundado en 2007 por tres amigos y que actualmente cuenta con un nutrido grupo de colaboradores, todos ellos profesionales con entre ocho y once años de experiencia en diversos aspectos del desarrollo y la programación web.
Además, Digital Icon, S.L. (N.I.F.: B84622927) es una empresa inscrita en el Registro Mercantil de Madrid, Tomo 22 436, Libro 0, Folio 20, Sección 8, Hoja M-400861, Inscripción 1, conforme a los artículos 18 del Código de Comercio y 6 del Reglamento del Registro Mercantil.
Si quiere conocer un poco mejor cómo trabajamos, puede descargar una copia del contrato que firmamos con nuestros clientes o seguirnos en Google+:
Cliente: Print&Plot
División: EidoWeb
Nuestro trabajo: PHP, XHTML, CSS, JavaScript
Cliente: La Fábrica
División: MovilizaWeb
Nuestro trabajo: PHP, HTML5, CSS
Cliente: Ana del Val
División: EidoWeb
Nuestro trabajo: PHP, XHTML, CSS, JavaScript
© Digital Icon, S.L., 2007 – 2018
Comentarios
Aparentemente la capa de enlace no funciona (al menos a mi) en IE. ¿Alguna sugerencia?
¿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…
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.
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.Acabo de ver la respuesta #4. Mañana mismo lo pruebo. Muchas gracias por todo.
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.
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: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.
Perfecto… Funcionó, muchas gracias.
No hay nada como leer, ya me he dado cuenta, en CSS colocas las imagenes de precarga en la posición absoluta, gracias.
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…
@Manolo: Tienes que modificar el marcado para que la imágen quede dentro del vínculo:
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.
@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:
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.
¿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.
@Jose: Ese control de diapositivas es un
ul
con elid
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.
¡Muchísimas gracias por este script mejorado! Gracias por toda la ayuda 🙂
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.
@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.
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.
@Luis: Se me ocurre que puedes incluir la imagen inicial en el marcado, y que la función del
setInterval
actualice su atributosrc
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.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.
@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:¿Algún comentario?