CoverFlow con Javascript

CoverFlow con Javascript

Un CoverFlow a lo iTunes en una web seria muy atractiva. Ya sea para ponerla como una galería de fotos o Albums de nuestros grupos favoritos, hacer esto se hace mas sencillo con la librería Javascript ImageFlow, en su versión 0.9.
La librería la encontre navegando y tuve la necesidad de modificarlo para que sea mas simple de usar. Les brindo el tutorial y la librería modificada para descargar.

Archivos necesarios para su funcionalidad:

• imageflow.js
• screen.css
• slider.png
• loading.gif
• y la carpeta img con los archivos de imagen para el CoverFlow.

Ahora creamos un archivo index.html en el adjuntamos el javascript y la hoja de estilo.

<link rel="stylesheet" href="screen.css" type="text/css" />
<script type="text/javascript" src="imageflow.js"></script>

ahora creamos un div con el id imageflow. Este sera el contenedor de la precarga, la galería, y el scroll para la galería

<div id="imageflow"> </div>

Si quieren que el tamaño de las imagenes cambien solo tendrán que modificar este estilo. Yo le puse 150px para que se acomode al medio de la pantalla.

#imageflow
{
margin-left:150px;
margin-right:150px;
}

Ahora dentro del div imageflow ponemos los divs loading, images, caption y scrollbar

<div id="loading">
<p>Loading images</p>
<img src="loading.gif" width="208" alt="loading" />
</div>
<div id="images">
<!-- Aquí irán las Imagenes. -->
</div>
<div id="captions"></div>
<div id="scrollbar">
<div id="slider"></div>
</div>

Luego podremos poner las imagenes que pretendamos aparezcan en el coverflow.

<img src="img/img.jpg" longdesc="img/img.jpg" alt="Desc" />

Y ya tenemos nuestro propio CoverFlow estilo iTunes.

Enlace:

ImageFlow

Descargas:

ImageFlow
ImageFlow (script + librería modificada)

Programas para crear páginas Web.