Caosgráfico

Antes que nada un feliz año 2008 a todas las personas que hacen posible este blog un abrazo especial al buen Pablito y su blog tt.webhostel.net y a Sergio de Giventti y bueno para iniciar el año encontré por la web esta bonita galería llamada ImageFlow.

ImageFlow es una galería que esta basada en JavaScript y que podemos agregar de manera fácil a cualquier proyecto web que necesite de una vistosa galería, la galería cuenta con un scroll que permite navegar entre las fotografías que forman nuestra galería también funciona con el botón del mause.

Para realizar la instalación:

1- Necesitamos descargar el script en: ImageFlow

2- Desde el archivo donde estara la galería hacemos la llamada correspondiente con el siguiente scipt:

script type=“text/javascript” src=“js/imageflow.js”></script>

3- Agregamos el estilo CSS de nuestra galería

<style type=“text/css”>

 

 

img {

position:absolute;

top:0px;

border:none;

}

h1 {

text-align:center;

}

a{

color:#fff;

}

.none{

visibility:hidden;

}

.none div{

display:none;

}

.clear{

clear:both;

}

#images{

visibility:hidden;

}

#loading{

margin-top:50px;

text-align:center;

width:100%;

}

#loading img{

margin-top:10px;

position:relative;

}

#captions{

position:relative;

text-align:center;

z-index:10000;

}

#scrollbar{

visibility:hidden;

position:relative;

border-bottom:1px solid #b3b3b3;

z-index:10001;

}

#scrollbar_slider{

position:absolute;

margin-top:-7px;

margin-left:-7px;

z-index:10002;

background-image:url(slider.png);

background-repeat:no-repeat;

width:14px;

height:14px;

}

#imageflow{

background-color:#000;

margin-left:350px;

text-align:left;

color: #fff;

}

</style>

3- Y por ultimo definimos la estructura de nuestra galería en HTML:

 

 

<div id=“imageflow”>
<div id=“loading”>
<b>Loading images</b><br/>
<img src=“loading.gif” width=“208″ height=“13″ alt=“loading” />
</div>
<div id=“images”>
<img src=“img/img001.png” alt=“Image 1″ />
<img src=“img/img002.png” alt=“Image 2″ />
<img src=“img/img003.png” alt=“Image 3″ />
<img src=“img/img002.png” alt=“Image 4″ />
<img src=“img/img003.png” alt=“Image 5″ />
<img src=“img/img001.png” alt=“Image 6″ />
<img src=“img/img002.png” alt=“Image 7″ />
<img src=“img/img003.png” alt=“Image 8″ />
<img src=“img/img002.png” alt=“Image 9″ />
<img src=“img/img001.png” alt=“Image 10″ />
</div>
<div id=“captions”></div>
<div id=“scrollbar”>
<div id=“slider”></div>
</div>
</div>
<div class=“clear”></div>