JS Coverflow, carousel de imagenes con puro JavaScript

JS Coverflow es un carousel de imágenes (diapositiva ó presentación de imágenes). Algunas de sus características son:

  • Funciona en Firefox 3, Opera 9.5 y Safari 3.
  • Solo trabaja con imágenes del mismo ancho y alto.
  • Puedes utilizar la rueda del ratón y las teclas de dirección para desplazarte por las imágenes.
  • Puedes personalizar las etiquetas y el evento onclick de cada imágen.

JS Coverflow

Cómo usarlo

Después de descargar coverflow.js, primero tendrás que definir el estilo para el contenedor del Coverflow:

#__cvfl-coverflow-wrapper canvas{
position: absolute;
}

#__cvfl-coverflow{
height: 375px;
margin: auto;
overflow: hidden;
position: relative;
width: 530px;
}

#__cvfl-coverflow-label{
color: #fff;
font: 14pt Lucida Grande, Lucida Sans Unicode;
line-height: 1.3em;
position: relative;
text-align: center;
top: 273px;
z-index: 700;
}

Finalmente despues dentro del body de la página:

<div id="__cvfl-coverflow">
<div id="__cvfl-coverflow-wrapper"></div>
<div id="__cvfl-coverflow-label"></div>
</div>

<script type="text/javascript" src="coverflow.js"></script>
<script type="text/javascript">
window.onload = function()
{
Coverflow.init(
[
{src: 'img/img-0-lo.jpg', label: {album: 'All That I Am', artist: 'Santana'}},
{src: 'img/img-1-lo.jpg', label: {album: 'August & Everything After', artist: 'Counting Crows'}},
{src: 'img/img-2-lo.jpg', label: {album: 'Back to Bedlam', artist: 'James Blunt'}},
{src: 'img/img-3-lo.jpg', label: {album: 'Carnival of Rust', artist: 'Poets of the Fall'}},
{src: 'img/img-4-lo.jpg', label: {album: 'Collision Course', artist: 'Linkin Park'}},
{src: 'img/img-5-lo.jpg', label: {album: 'Crossfade', artist: 'Crossfade'}},
{src: 'img/img-6-lo.jpg', label: {album: 'Dexter', artist: 'Rolfe Kent'}},
{src: 'img/img-7-lo.jpg', label: {album: 'Life for Rent', artist: 'Dido'}},
{src: 'img/img-8-lo.jpg', label: {album: 'Say I Am You', artist: 'The Weepies'}},
{src: 'img/img-9-lo.jpg', label: {album: 'Signs of Life', artist: 'Poets of the Fall'}},
{src: 'img/img-10-lo.jpg', label: {album: 'Viva la Vida', artist: 'Coldplay'}},
{src: 'img/img-11-lo.jpg', label: {album: 'We Were Here', artist: 'Joshua Radin'}}
],
{
createLabel: function(item)
{
return item.label.album +'<br>'+ item.label.artist;
}
/*si deseas configurar el evento onclick hacerlo en las siguiente lineas*/
/*,
onSelectCenter: function(item, id)
{
var img = new Image();
img.onload = function()
{
Lightbox.show(this.src, id);
};
img.src = item.src.replace('-lo.jpg', '-hi.jpg');
}*/
});
}
</script>

Puedes descargar un ejemplo editado por mi desde aqui.

Vía Ajaxian

Últimas publicaciones

Jesus Liñanhttps://www.ribosomatic.com
Analista Programador y Desarrollador Web. Administrador de RibosoMatic. Autodidacta y entusiasta de la tecnología, internet, aplicaciones, hardware, gadgets y tutoriales para desarrollo de aplicaciones para la web.

Publicaciones relacionadas