Carrusel en jQuery sin plugins

Necesitaba crear un carrusel de imágenes para una página cuya cabecera, donde debía introducirse el carrusel, contaba con demasiados elementos que debían mantenerse sobre la imagen cargada y que eran ajenos a la posibilidad de cambiar las imágenes. Tras probar con diversos plugin, era evidente que sustituían demasiadas cosas y que no me daban el control que necesitaba, así que decidí programarlo desde cero usando jQuery.

La maquetación requería una flecha para la foto anterior y otra para la siguiente. De llegar a la última imagen, se cargaría la primera; al llegar a la primera, de continuar hacia atrás, cargaría la última. En el intermedio, mientras se cargase la imagen, se mostraría un spinner. Esta es la estructura HTML, quitados los detalles ajenos.

<div id=”cabecera”>
<div id=”loader”></div>
<div class=”flechas”>
<div class=”flecha_cabecera izquierda”><img src=”flecha_izquierda.png” alt=”Atr&aacute;s” /></div>
<div class=”flecha_cabecera derecha”><img src=”flecha_derecha.png” alt=”Siguiente”  /></div>
</div> <!– fin del wrapper para las flechas –>

</div> <!– fin del div cabecera –>

El código javascript  necesitará localizar los siguientes elementos:

  • El div cabecera, con el id “cabecera”
  • El div que contendrá el spinner, con el id “loader”
  • Las flechas, con las únicas clases identificativas “izquierda” y “derecha” respectivamente.

Necesitamos las siguientes variables globales:

var mycarousel_itemList = [<%=ListaCabeceras%>];
var total = mycarousel_itemList.length;
var indice = 0;

ListaCabeceras, proveniente de una función de ASP, contiene un string con las rutas de las fotos que queremos. Los momentos en los que se activará el carrusel será cuando el usuario pulse o bien la flecha izquierda o la flecha derecha. Establezco los eventos click para ambos elementos cuando se cargue el DOM.

$(function() {

$(‘#cabecera’).css(‘background-image’,”);

//Establezco la primera cabecera por defecto, que se mostrará antes de que se realice ningún evento relacionado con el carrusel.

$(‘#cabecera’).prepend(‘<img src=”‘ + mycarousel_itemList[0].url + ‘” id=”cabecera_imagen” alt=”” style=” z-index: -4; position: absolute;”‘);

//Selecciono la flecha izquierda. Ya que quiero que esté sobre la imagen, establezco la propiedad z-index a uno.

var flecha_izquierda = $(‘#cabecera .izquierda’).css(‘z-index’,’1′);

$(flecha_izquierda).click(function(){

//En el caso de que quiera ir atrás cuando la imagen no sea la primera.

if (indice != 0 ){

//Tengo que cambiar la imagen a la inmediatamente anterior.

//Elijo la imagen que ya está. En caso de que sea la primera vez, será la puesta arriba. En caso contrario,
// será la que se haya cargado al pulsar anterior o siguiente.

var cabecera = $(‘#cabecera #cabecera_imagen:first’);

indice–;

cargaImagen(cabecera);

}else{

//Es la primera imagen. Cargamos la última de la lista.

var cabecera = $(‘#cabecera #cabecera_imagen:first’);

indice = total – 1;

cargaImagen(cabecera);

}

});

//Selecciono la flecha derecha. Ya que quiero que esté sobre la imagen, establezco la propiedad z-index a uno.

var flecha_derecha = $(‘#cabecera .derecha’).css(‘z-index’,’1′);

$(flecha_derecha).click(function(){

if (indice != total – 1 ){

//Tengo que cambiar la imagen a la inmediatamente anterior.

//No es la última imagen.

var cabecera = $(‘#cabecera #cabecera_imagen:first’);

indice++;

cargaImagen(cabecera);

}else{

//Es la última imagen. Cargamos la primera de la lista.

var cabecera = $(‘#cabecera #cabecera_imagen:first’);

indice = 0;

cargaImagen(cabecera);
}

});

});

Nótese que se delega la carga de una imagen a la función cargaImagen. Dado que se usa en diferentes secciones es necesario aislarla.

function cargaImagen(cabecera){

//Añado la clase “loading” al spinner, para que aparezca.
$(‘#cabecera #loader’).addClass(‘loading’);

//Paso a negro la primera foto.
//Nótese el slice. Se elige la primera por si acaso el usuario ha pulsado muchas veces consecutivas la flecha
// y se han añadido más fotos de las debidas. No debería pasar, pero conviene.

$(cabecera).slice(0,1).animate({opacity: 0.0}, 500, function() {

//Una vez fundida, ya no necesitamos esta cabecera. La elimino del DOM.

$(this).remove();

//Creo un nuevo objeto imagen.

var img = new Image();
$(img)

// Al cargarse la imagen, ejecutar este código.
.load(function () {

//Oculto esta imagen de momento, hasta que la añada al DOM.

$(this).hide();

//Añado los atributos necesarios a la imagen para que se coloque en su sitio.

$(this).attr(‘id’,’cabecera_imagen’)
.attr(‘class’,’imagen_de_cabecera’)
.attr(‘alt’,”)
.css(‘z-index’,’-4′)
.css(‘position’,’absolute’);

//Sólo añadirá la cabecera en el caso de que la cantidad de imágenes con la clase
// “imagen_de_cabecera” sea cero.

//Esto es muy importante, dado que en caso contrario la pulsación masiva de la misma flecha
// acabaría añadiendo muchas fotos al DOM.

var listaImagenesCabecera = $(‘#cabecera .imagen_de_cabecera’);

var cantidadImagenesCabecera = $(listaImagenesCabecera).length;

if (cantidadImagenesCabecera == 0) {

$(‘#cabecera’).prepend(this);

}

// Fundimos de negro a opacidad absoluta.
$(this).fadeIn();

//Quito el spinner de vista eliminado la clase que hace alusión a la imagen.
$(‘#loader’)

.removeClass(‘loading’);
})

// En caso de que la imagen no haya podido cargarse (para debug)
.error(function () {

//console.log(“No se ha podido cargar la imagen”);

})

// Establezco el atributo src a la ruta de la imagen de la lista que le corresponde según el índice.
.attr(‘src’,mycarousel_itemList[indice].url);

});

}

El estilo del spinner es significativo:

DIV#loader {
width: 30px;
height: 30px;
}

DIV#loader.loading {
background: #fff url(spinner.gif) no-repeat center center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 10px;

}

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: